General inputs

Be sure to use an appropriate type attribute on all inputs (e.g., code email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Text

Password

Placeholder

Text area

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 and time

Date

Month

Week

Time

Number

Color

Range

Range (custom)

Select (custom)

File (Browser)

Choose file

General inputs (disabled)

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.

Text disabled

Email disabled

Password disabled

Placeholder disabled

Text area disabled

Static control disabled

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

Input Select disabled

Multiple Select disabled

Default file input disabled

Date and time disabled

Date disabled

Month disabled

Week disabled

Time disabled

Number disabled

Color disabled

Range disabled

Range (disabled)

Select (disabled)

File Browser (disabled)

Choose file

Input Sizes

Set heights using classes like .input-lg, .input-sm and for custom inputs, you can use .custom-select-sm, .custom-select-lg, and set widths using grid column classes like .col-lg-*

Small

Normal

Large

Grid Sizes

Check out how it works

Altering with utilities

You can easily alter the border, boder-radius and padding using the utility classes.

Square edges

Rounded pill

Material

Border color

Basic Inputs Default input elements for forms

General inputs

General inputs (disabled)

Input Sizes

Altering with utilities