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.

Bootstrap 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

Bootstrap 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:

Bootstrap Multiple Inputs and Helpers

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

Bootstrap Input Group with Check boxes and Radio button

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

Bootstrap Input Group Buttons

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

Bootstrap 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: