Basic Elements
Input Types
Most common form control, text-based input fields. Includes support for all HTML5
types: text, password, datetime,
datetime-local, date, month,
time, week, number, email,
url, search, tel, and color.
Select menu
Custom <select> menus need only a custom class,
.form-select to trigger the custom styles.
Switches
A switch has the markup of a custom checkbox but uses the
.form-switch class to render a toggle switch. Switches also
support the disabled attribute.
Checkboxes and radios
Floating labels
Wrap a pair of <input class="form-control"> and
<label> elements in .form-floating to enable
floating labels with Bootstrap’s textual form fields. A placeholder is
required on each <input> as our method of CSS-only floating
labels uses the :placeholder-shown pseudo-element. Also note that the
<input> must come first so we can utilize a sibling selector
(e.g., ~).
Floating Example
Selects
Input Sizes
Set heights using classes like .input-lg, and set widths using grid
column classes like .col-lg-*.
Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
Basic Example
Horizontal form
Column sizing
As shown in the previous examples, our grid system allows you to place any number of
.cols within a .row.
Auto-sizing
Gutters
More complex layouts can also be created with the grid system.
Custom checkbox - Basic
Supports bootstrap brand colors: .form-check,
.form-check-* etc.
Custom checkbox - Circled
.rounded-circle for roundness.
Custom checkbox - Disabled
Disabled state also supported.
Custom radio - Basic
Supports bootstrap brand colors: .form-check,
.form-check-* etc.
Custom radio - Disabled
Disabled state also supported.
