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.

A block of help text that breaks onto a new line and may extend beyond one line.

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

We'll never share your email with anyone else.

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.