Form 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.
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., ~).
Example
Textareas
Selects
Layout
Select & Switches
Select
<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
Each checkbox and radio <input> and
<label> pairing is wrapped in a <div> to
create our custom control. Structurally, this is the same approach as our
default .form-check.
Checkboxes
Inline
Disabled
Colors
radios
Each checkbox and radio <input> and
<label> pairing is wrapped in a <div> to
create our custom control. Structurally, this is the same approach as our
default .form-check.
Radios
Inline
Disabled
Colors
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
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Horizontal form
Create horizontal forms with the grid by adding the
.row class to form groups and using the .col-*-*
classes to specify the width of your labels and controls. Be sure to add
.col-form-label to your <label>s as well so
they’re vertically centered with their associated form controls.
Inline Form
Use the .row-cols-lg-auto, .g-3 &
.align-items-center class to display a series of labels, form
controls, and buttons on a single horizontal row. Form controls within inline
forms vary slightly from their default states. Controls only appear inline in
viewports that are at least 576px wide to account for narrow viewports on mobile
devices.
Auto-sizing
Horizontal form label sizing
Be sure to use .col-form-label-sm or
.col-form-label-lg to your <label>s or
<legend>s to correctly follow the size of
.form-control-lg and .form-control-sm.
Form Row
By adding .row & .g-2, you can have control over the
gutter width in as well the inline as block direction.