What does Bootstrap's control-label class do?

Question

What CSS formatting is applied to the <label> HTML element by the .control-label Bootstrap 3 class. (I also face difficulties locating that class using Chrome's devtools)

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

Answer 1

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>

Using control-label class:

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

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