Google Ad Slot: content-top

Bootstrap 5 Input Groups

~1 min read · Bootstrap

On this page

Input groups in Bootstrap 5 are a convenient way to add additional elements like text, icons, or buttons next to input fields. This allows for enhanced form inputs and a more polished UI.

Basic Input Group:

Use the .input-group class to create an input group. Combine it with .input-group-text for static content like text or symbols.

Example

Try it yourself

Input Group with Buttons:

Add buttons to the input group using the .btn class.

Example

Try it yourself

Multiple Add-ons:

You can have multiple addons before or after the input.

$ 0.00

Detail

Example

$ 0.00

Detail

Try it yourself

Checkbox or Radio Add-ons:

You can include checkboxes or radio buttons in input groups.

Checkbox:

Radio:

Example

Checkbox:

Radio:

Try it yourself

Input Group with Dropdown:

Dropdowns can also be included in input groups.

Example

Try it yourself

Input Group Sizing:

Change the size of the input group by using .input-group-lg or .input-group-sm.

Large Input Group:

Small Input Group:

Example

Large Input Group:

Small Input Group:

Try it yourself

Complete Input Group Demo

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Input Groups

Basic Input Group:

Input Group with Buttons:

Multiple Add-ons:

Checkbox or Radio Add-ons:

Input Group with Dropdown:

Input Group Sizing:

Cookie Consent & Privacy Preferences