Bootstrap Inputs Group

Inputs groups are special containers that have a form input and some text or icon attached to them that enhances the readability of the input.

Basic Input Groups

Here are the basic steps for creating and input group:

  • The basic contextual class needed for an input group is the .input-group class. As told before, this is just a container that will add an icon, text or a button at either or both sides of the input as a “help text”.
  • The two contextual classes that decide whether the “help text” comes before or after the input are:
    • .input-group-prepend: to add the help text in front of the input
    • .input-group-append to add help text behind the input.
  • Finally, we will add the .input-group-text class which will style the specified help text.

Here’s the sample code for illustration:

To ensure proper margin-bottom for the input group, you can use the utility class .mb-3

Input Group Sizing

The size of the input groups can be determined using following two classes:

  • .input-grp-sm: Small size
  • .input-grp-lg: Large size

Check out the code implementation for the same:

Multiple Inputs and Helpers

You can have more than one inputs or addons. Observer the code below to know more:

Input Group with Checkboxes and Radio button

The input groups aren’t restricted to text icons. You can also use radio buttons and checkboxes:

Input Group Buttons

Following code is an example of using different type of buttons in input groups

Input Group with Dropdown Button

To add a dropdown button in the input group you don’t require to use the .dropdown wrapper. See the code below: