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.