iraklisg iraklisg - 1 month ago 6
CSS Question

What does bootstrap's control-label class do?

What CSS formatting is applied to the

<label>
html element by the
.control-label
bs3 class. (I also face difficulties locating that class using chrome's devtools)

Moreover, in the official BS3 documentation,
.control-label
seems to be used only in case of
.form-horizontal
. Is that true and why ?

Answer

The control-label class is useful for validation states, that's why we need it in all labels even the fields bootstrap's documentation doesn't mention.

We can see it in the bootstrap source code when it is defining the has-success, has-warning, etc classes: https://github.com/twbs/bootstrap/blob/bfb99413eefbbe2e8fbb1e477cbfa63ea7d36140/dist/css/bootstrap-rtl.css#L3242

As you can see, it uses the control-label class not the label element. If we remove the control-label we'll have an undesired effect of not coloring the label green.

Vertical form without control-label class and has-success on form-group:

<div class="form-group has-success">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>

enter image description here

Using control-label class:

<label for="exampleInputEmail1" class='control-label'>Email address</label>

enter image description here

That's why I think it is better to keep it! Unless no color is the desired effect.

Comments