Skip to main content

Input Groups in Bootstrap 5

Bootstrap Input Groups​

In Bootstrap , you can create input groups by combining input fields with other elements, such as buttons, dropdowns, or text.

Input groups are useful for creating forms or displaying additional information related to the input field.

As an example:

Editor

Loading...

In the above example:

We create different types of input groups using Bootstrap 5 classes.

Basic input group:

  • The input group consists of a label (represented by <span class="input-group-text">) and an input field (<input type="text" class="form-control">).

Input group with a button:

  • The input group includes an input field (<input type="text" class="form-control">) and a button (<button class="btn btn-primary">).

Input group with a dropdown:

  • The input group contains a button (<button class="btn btn-outline-secondary">), a dropdown (<select class="form-select">), and another button (<button class="btn btn-primary">).

Input Group Size​

You can control the size of input groups by using different classes. By applying size-specific classes to the input group, you can adjust the size of both the input field and the associated elements.

Here are the available input group size classes in Bootstrap 5:

  • .input-group-sm: Creates a small-sized input group.
  • .input-group: The default size for input groups.
  • .input-group-lg: Creates a large-sized input group.

As an example:

Editor

Loading...

In the above example:

  • We create input groups with different sizes using the appropriate classes.
  • The first input group is small-sized with the class input-group-sm.
  • The second input group is the default size, and the third input group is large-sized with the class input-group-lg.

Input Group with Checkboxes and Radios​

You can create input groups that include checkboxes or radio buttons by combining them with the input group elements. This allows you to associate checkboxes or radio buttons with an input field, providing additional functionality or options.

As an example:

Editor

Loading...

In the above example:

We create input groups with checkboxes and radio buttons by combining them with the input group elements.

For the input group with checkboxes:

  • We use the input-group class as the container.
  • Inside the container, we add the <span class="input-group-text"> element to display the label for the checkboxes.
  • The checkboxes themselves are wrapped in <div class="form-check"> elements, each containing an <input class="form-check-input"> element and a corresponding <label class="form-check-label">.

For the input group with radio buttons:

  • We use the input-group class as the container and include the <span class="input-group-text"> element as the label for the radio buttons.
  • The radio buttons are wrapped in <div class="form-check"> elements, each containing an <input class="form-check-input"> element and a corresponding <label class="form-check-label">.