Bootstrap 4 Forms
Create responsive and consistently styled forms using Bootstrap 4 form classes
Bootstrap 4 provides a default style that is applied across most form controls. It also provides classes for specific purposes.
Basic Form
Use Bootstrap's .form-control
class against textual <input>
, <textarea>
, and <select>
elements to apply width: 100%
by default.
Wrap labels and controls inside a <fieldset>
with the Bootstrap .form-group
class applied for optimum spacing. Alternatively, you can use a <div>
or other element.
Inline Form
Use Bootstrap's .form-inline
class to make the form elements render as inline-block and left-aligned. Use a spacer utility (eg, mr-sm-2
) to add space between elements.
Note that this only applies when the viewport is at least 576 pixels wide. If the following form is not displaying inline, open the preview in a new window. If it still isn't displaying inline, you might need to view the example on a bigger screen.
Hidden Labels
Labels should always be provided on input fields, otherwise screenreaders will have trouble. You can hide the label if required, by using Bootstrap's .sr-only
class.
Here, we use .sr-only
to hide the labels. We also add a placeholder
attribute to provide a hint to the user as to what to enter. Using the placeholder
attribute in this manner is not recommended, as it can cause usability issues.
Horizontal Form
You can use Bootstrap's grid classes to create horizontal forms. Just specify how many columns each element should span. Specifically, add a .row
class to the .form-group
and a .col-*-*
or .col-*
class for each column.
You should also add Bootstrap's .col-form-label
class to the <label>
element in order to vertically center the label in relation to textual input elements.
Bootstrap 4 vs Bootstrap 3
There are some minor differences between Bootstrap 4 and Bootstrap 3 when it comes to horizontal forms.
- Grids
When using grids for form layout, Bootstrap 4 requires the
.row
class. This class is not a requirement on Bootstrap 3 forms (although it is still a requirement on Bootstrap 3 grids in general).- Control Labels
Bootstrap 4 uses
.col-form-label
* when using grids for form layout, whereas Bootstrap 3 forms use.control-label
.* Note that Bootstrap 4 initially used
.form-control-label
but subesquently changed this to.col-form-label
.- The
.form-horizontal
Class - Bootstrap 4 doesn't require the
.form-horizontal
class. Bootstrap 3 does require it.
Form Row
You can replace .row
with .form-row
for a more compact layout.
Form Legends
When using <legend>
elements within your forms, you have the option of adding Bootstrap's .col-form-label
class. This class styles the legend to be more like a label.
This can be handy for when presenting a stack of radio buttons or checkboxes within a horizontal form.
Form Control Size
You can use Bootstrap 4's .form-control-lg
and .form-control-sm
to increase or decrease the size of an input control.
Bootstrap 4 vs Bootstrap 3
Bootstrap 4 uses a different class to Bootstrap 3 when it comes to form control size.
- Bootstrap 4
Bootstrap 4 forms use
.form-control-lg
and.form-control-sm
to increase or decrease the size of an input control.- Bootstrap 3
Bootstrap 3 forms use
.input-lg
and.input-sm
.
Form Label Size
You can add .col-form-label-sm
and .col-form-label-lg
to your labels so that the label size matches the form control.
New in Bootstrap 4
The .col-form-label-sm
and .col-form-label-lg
classes are new in Bootstrap 4.
Column Size
You can use Bootstrap's grid system to constrain input controls to a desired width.
Help Text
Bootstrap 4 provides the .form-text
class that can be used to indicate help text. You can combine this class with utility classes such as .text-muted
.
You should also use the .aria-describedby
attribute to associate the help text with the form control. This will ensure that screen readers can announce the help text when the user focuses on the form control.
Bootstrap 4 vs Bootstrap 3
Bootstrap 4 uses a different class to Bootstrap 3 for displaying help text.
- Bootstrap 4
Bootstrap 4 uses
.form-text
for displaying help text.- Bootstrap 3
Bootstrap 3 forms use the
.help-block
class.
Static Control
You can use Bootstrap's .form-control-plaintext
on a <p>
element to present plain text next to a label (eg. instead of using an input field).
Bootstrap 4 vs Bootstrap 3
Bootstrap 3 used the .form-control-static
class for displaying static text. In Bootstrap 4, the .form-control-static
class has been replaced with .form-control-plaintext
.
Checkboxes & Radio Buttons
Bootstrap 4 provides the .form-check
, .form-check-label
, .form-check-input
, and .form-check-inline
classes for displaying checkboxes and radio buttons.
To display the checkboxes or radio buttons stacked, nest each one inside a <div>
with the .form-check
class.
Also, add the .form-check-label
to the <label>
tag, and .form-check-input
to the <input>
tag.
Inline
With Bootstrap 4, checkboxes and radio buttons are stacked by default (they appear above one another). You can display them inline by adding .form-check-inline
to the surrounding <div>
. Keep the .form-check-input
on the <input>
tag.
Bootstrap 4 vs Bootstrap 3
- Bootstrap 3
- Uses
.radio
,.radio-inline
,.checkbox
, or.checkbox-inline
to display checkboxes and radio buttons. - Bootstrap 4
- Uses
.form-check
,.form-check-label
,.form-check-input
, and.form-check-inline
.