Using the classes
(for inputs, selects, etc) and
for wrappers you can consistently style and layout forms.
Examples of how the various
elements look when
Rounded Input Form Controls
Use the class
elements to make
elements within the form display inline.
Forms support the default Bootstrap grid functionality so you can use the
width classes throughout your forms.
You can also add the class
elements to vertically center them with the row content.
Form control sizes
You can enlarge or shrink
elements by adding the classes
Within a grid layout
When space is low it can be useful to hide form labels and use the HTML5
elements to show the label inside the form element instead.
element and then move the label text to a
attribute on the
Static form controls
Sometimes it's useful to form data to a user but not let them change it, this is where you can use the class
within your forms.
Disabled form elements & readonly inputs
You can disable single form elements by applying the boolean attribute
to them OR apply it to a fieldset wrapper to disable all form elements within the fieldset.
Apply the readonly style by adding the boolean attribute
to any form input. Readonly elements cannot be altered.
Sometimes it's useful to tell users what information is needed for a given form field and this is where you can use the
on any static element within form groups to provide help text. Use
tags for block level text and
tags to show inline.
You could also use tooltips as well.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Tooltip form help
Validation states help give users an instance visual feedback on whether their form input has passed validation. There are 3 clasess for this:
In horizontal forms
Simply add data
to any radio or checkbox element:
<input type="checkbox" data-toggle="switch" checked>
Find more examples at Bootstrap Switch.