Input Groups

Input groups allow you to combine any number of controls into a single line layout. They look great and are easy enough to build


Input Group Classes

  • input-group{SIZ}

    • SIZ: sm lg
  • input-group-text

Try it Docs

There are a few special classes.

input-group - is the main class for the container of the input groups. There are two additional size classes you can use.

input-group-text - is the class to use when you want to add text to an input group.

You can use any background or text color classes and inside you can use any other input control like dropdowns, buttons, checkboxes. Just about anything. The website has some examples of the different types and I've tried to place a few of them for you here.