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
.
Custom <select>
menus need only a custom class, .custom-select
to trigger the custom styles.
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.
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
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.
You may also swap .row
for .form-row
, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
Supports bootstrap brand colors: .checkbox-primary
, .checkbox-info
etc.
Checkboxes without label text .checkbox-single
Inline checkboxes
.checkbox-circle
for roundness.
Disabled state also supported.
Supports bootstrap brand colors: .radio-primary
, .radio-danger
etc.
Radios without label text .radio-single
Inline radios
Disabled state also supported.