Elements:Forms
Form Elements
Using the classes
.form-control
(for inputs, selects, etc) and
.form-group
for wrappers you can consistently style and layout forms.
Input examples
Examples of how the various
input
elements look when
.form-control
is applied.
Rounded Input Form Controls
Use the class
.form-control-rounded
to
input
elements to make them rounded, this can be used in combination with the rounded buttons and input groups.
Inline Forms
Use the class
.form-inline
to
form
elements to make
.form-control
elements within the form display inline.
Extended Example
Grid Layouts
Forms support the default Bootstrap grid functionality so you can use the
.col-BREAKPOINT-WIDTH
width classes throughout your forms.
You can also add the class
.col-form-label
to
label
elements to vertically center them with the row content.
Form control sizes
You can enlarge or shrink
.form-control
elements by adding the classes
.form-control-lg
or
.form-control-sm
.
Input elements
Select elements
Within a grid layout
Hidden labels
When space is low it can be useful to hide form labels and use the HTML5
placeholder
attribute on
input
elements to show the label inside the form element instead.
Simply add
class="sr-only"
to the
label
element and then move the label text to a
placeholder
attribute on the
input
element instead.
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
.form-control-static
on a
p
within your forms.
Disabled form elements & readonly inputs
You can disable single form elements by applying the boolean attribute
disabled
to them OR apply it to a fieldset wrapper to disable all form elements within the fieldset.
Single input
Fieldset
Readonly
Apply the readonly style by adding the boolean attribute
readonly
to any form input. Readonly elements cannot be altered.
Help text
Sometimes it's useful to tell users what information is needed for a given form field and this is where you can use the
.form-text
on any static element within form groups to provide help text. Use
p
tags for block level text and
small
or
span
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.
Inline
Tooltip form help
Validation states
Validation states help give users an instance visual feedback on whether their form input has passed validation. There are 3 clasess for this:
.is-invalid
,
.is-valid
&
.invalid-feedback
for feedback messages.
Toggles
Simply add data
data-toggle="switch"
to any radio or checkbox element:
Example:
<input type="checkbox" data-toggle="switch" checked>
Find more examples at Bootstrap Switch.