Google Ad Slot: content-top

Bootstrap 5 Input

~1 min read · Bootstrap

On this page

In Bootstrap 5, input fields are styled using the form-control class, which makes them responsive and visually appealing with minimal effort. Bootstrap provides various options to customize and enhance input fields.

Basic Input:

To style a basic input field, add the form-control class:

Example Input

Example

Example Input

Try it yourself

Input Types:

Bootstrap supports all standard HTML input types:

Password

Number

Date

Example

Password

Number

Date

Try it yourself

Input Sizes:

Adjust input sizes using the form-control-{size} classes:

Class	Description
form-control-lg	Large input field.
form-control	Default input field size.
form-control-sm	Small input field.

Example

Try it yourself

Disabled and Readonly Inputs:

Disabled:

Readonly:

Example

Disabled:

Readonly:

Try it yourself

Validation States:

Bootstrap provides classes for styling validation states:

Class	Description
is-valid	Green border for valid input.
is-invalid	Red border for invalid input.

Looks good!

Please provide a valid value.

Example

Looks good!

Please provide a valid value.

Try it yourself

Other Inputs:

Checkbox input:

Check me out

Switch me out

Radio input:

Select this option 1

Select this option 2

Range input:

Example

Checkbox input:

Check me out

Switch me out

Radio input:

Select this option 1

Select this option 2

Range input:

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Input

Basic Input:

Input Types:

Input Sizes:

Class

Description

Disabled and Readonly Inputs:

Validation States:

Class

Description

Other Inputs:

Cookie Consent & Privacy Preferences