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

Email

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

Multiple Select

Default file input

Date

Month

Time

Week

Number

Color

Range

Input Select menu Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.

Checkboxes and radios

Check this custom checkbox

Toggle this custom radio

Or toggle this other custom radio

Input Sizes Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.

Small

Normal

Large

Grid Sizes

Check out how it works

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

Static

@

We'll never share your email with anyone else.

Dropdowns

Buttons

Custom file input

Choose file

Basic Example

Horizontal form

Email

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.

Form Elements Default elements for forms

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

Input Select menu Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.

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

Auto-sizing

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.

Form Elements Default elements for forms

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.

Input Select menu Custom <select> menus need only a custom class, .custom-select to trigger the custom styles.

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

Auto-sizing

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.

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

Input Select menu Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.

Input Sizes Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.

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.