Bootstrap Basic

Input text

Use input type="text".

Password

Use input type="password".

Email

Use input type="email".

Url

Use input type="url".

Telephone Number

Use input type="tel".

Search

Use input type="search".

Range

Use input type="range".

Custom Range

Use input type="range".

Helper Text

Input with help text ( Default Left)

Use small tag and .text-muted for helper text.

I am the helper text.

Input with help text (Center)

Use .text-center class to align center.

I am the helper text.

Input with help text (Right)

Use .text-right class to align right.

I am the helper text.

Input with badge help text (Default Left)

Wrap the small tag inside the span tag with .badge

I am the helper text.

Input with badge help text (Center)

Use .text-center class to align center.

I am the helper text.

Input with badge help text (Right)

Use .text-right class to align right.

I am the helper text.

Input with block badge help text (Default Left)

Use .w-100 class to the span tag to make block.

I am the helper text.

Input with block badge help text (Center)

Use .text-center class to align center.

I am the helper text.

Input with block badge help text (Right)

Use .text-right class to align right.

I am the helper text.

Form controls

Sizing

Readonly

Form grid

Form row

Form groups

Horizontal form label sizing

Column sizing

Inline Help text

Min 8-20 char

Help text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Disabled forms

Custom Forms

Checkboxes

Radio

Inline radio

Disabled

Select menu

Select menu sizing

Multi select

Select size

File browser