33

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?

1 Answer 1

44

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.

2
  • Thank you for your answer. I also noticed that the .control-label class is also applied in case of .form-horizontal (for browsers larger than 768px), to .form-inline and to .navbar-form, altering margins/padding and/or positioning
    – ira
    May 16, 2016 at 8:04
  • Yes, I also add control-label to each <label> element inside form, not only for validation. It also help you find out all label in form by selector if needs.
    – Cheung
    Apr 7, 2017 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.