Menu
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?
674
form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
Add text-align: center in your CSS or text-center class to your parent element (probably to a row or container ).
using . form-group{ margin-bottom: 20px;} works, but best to use bootstrap's builtin and put .
Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control. Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag.
How do I create a label in Bootstrap? The setup is simple: simply insert a label> element into your markup, give it the for =" labeled form control ID " attribute, and write the relevant text to be shown inside of it. Which class in Bootstrap is used to create a label?
Moreover, in the official Bootstrap 3 documentation, .control-label seems to be used only in case of .form-horizontal. Is that true and why? 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.
Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class .form-control to all textual <input>, <textarea>, and <select> elements
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 Yes, I also add control-label to each <label> element inside form, not only for validation.
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.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With