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.

Text

Password

Placeholder

Text area

Readonly

Disabled

Static control

Helping text

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

Input Select

Default file input

Date

Month

Time

Week

Number

URL

Tel

Color

Range

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.

Toggle this switch element

Disabled switch element

Checkboxes

Check this custom checkbox

Radios

Toggle this custom radio

Or toggle this other custom radio

Disabled

Check this custom checkbox

Toggle this custom radio

Basic Example

Horizontal form

Password

Re Password

Check me out !

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

Remember me