Twitter Bootstrap Question posted in

Twitter Bootstrap .col on a <label>

When using Twitter Bootstrap two columns, each 12 columns wide when viewed on an xs device, render themselves on one line:

<label for="contact" class="col-sm-3 control-label">Preferred Contact Method:</label>
<label for="telephone" class="col-sm-2 control-label">
  <small><em>Telephone</em></small>
</label>

When viewed on a small mobile the columns should expand to effectively col-xs-12 each; however, both items are shown next to each other suggesting this is not the case. What’s even more curious is that another item, say of col-sm-2, does appear on the next line.

The above problem and correct functionality can be achieved via wrapping either <label> in a <div>. I was under the impression that the class col-* can be used on any element; however, perhaps I have understood this wrong as applying it to a <label> does not produce the expected results, that is, the <label> does not expand to fill the row unless it comes after/follows a <div>.

Is my understanding incorrect or is something else at play?

Tags:

2

Answers


  1. 0

    The following code is what I think you want:

    .control-label{
    background:#00F;
    color:#FFF;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<label for="contact" class="col-xs-12 col-sm-3 col-md-6 control-label">Preferred Contact Method:</label>
<label for="telephone" class="col-xs-12 col-sm-2 col-md-6 control-label">
  <small><em>Telephone</em></small>
</label>

    It is full-width on very small devices (less than 768px) – that is col-xs – one quarter-width on small devices (between 768px and 992px) – that is col-sm – and half-width on any device larger than that – that is col-md.

    If I got it wrong, just say to update my answer.
    If it helps, +1.

    Login or Signup to reply.
  2. 0

    I was under the impression that the class col-* can be used on any element

    Yes, in general you can use the col-* classes on almost any element – but without a row element around them, you might not get the expect results. (For example, .row includes a negative margin on the left and right side, to counter the padding between the columns that produces the “gutter” between them.)

    However, for your specific problem here, you can solve that in two ways.
    Either add col-xs-12 class on both of them – that will apply width:100%, and make them go across the whole width on small screens.
    Or add label { display:block; }, that will make them take full width as well – by default, they are inline elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search