Bootstrap Rounded

Use .form-control-rounded to make input group rounded.

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

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

Column sizing

Form groups

Horizontal form label sizing

Help text

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

Inline Help text

Min 8-20 char

Disabled forms

Custom Forms

Select menu

File browser

Select menu sizing

Multi select

Select size