Form Element
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, .custom-select
to trigger the custom styles.
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch class to
render a toggle switch. Switches also support the disabled attribute.
Checkboxes and radios
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
Inline Form
Use the .form-inline 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
Form row
You may also swap .row for .row, a variation of our standard grid row that overrides
the default column gutters for tighter and more compact layouts.
Custom checkbox - Basic
Supports bootstrap brand colors: .checkbox-primary, .checkbox-info
etc.
Checkboxes without label text .checkbox-single
Inline checkboxes
Custom checkbox - Circled
.checkbox-circle for roundness.
Custom checkbox - Disabled
Disabled state also supported.
Custom radio - Basic
Supports bootstrap brand colors: .radio-primary, .radio-danger etc.
Radios without label text .radio-single
Inline radios
