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, .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.

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

We'll never share your email with anyone else.

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.


Form row

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.

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

Custom radio - Disabled

Disabled state also supported.