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
<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.
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.
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
Custom Switch
Here are a few types of switches.