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.
Select Menu
Custom <select> menus need only a custom class, .form-select to trigger the custom styles.
Select Menu Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
Checkboxes & radios
Checkbox
Radios
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.
Input Sizes & Group
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
Basic Example
Horizontal form
Inline Form
Use the .col-auto class to create horizontal layouts.
Auto-sizing
Form grid
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.
Floating labels
Create beautifully simple form labels that float over your input fields.
