Advertisements

Bootstrap

Input Groups

In this tutorial you will learn how to use the Bootstrap input group component.

Extending Form Controls with Bootstrap

Bootstrap input group component is a very flexible and powerful component for creating interactive and elegant form controls, however, it is limited to text input, select, and textarea only.

In the following sections you will see how to extend form controls by adding the text, icons and buttons before, after, or on both sides of it to make your form more attractive.

Creating Prepended and Appended Inputs

Input groups are created using the class .input-group. It act as a container for inputs and addons.

Further, wrap the text or icon in a <span> element as well as apply the class .input-group-text on it and place it before or after the input. Let’s take a look at the following example:

— The output of the above example will look something like this:

Since Bootstrap 5 you can also prepend or append select box dropdown and textarea form controls. Let’s try out the following example and see how it basically works:

— The output of the above example will look something like this:

Similarly, you can prepend or append addons to Bootstrap’s custom file input, like this:

— The output of the above example will look something like this:

Checkboxes and Radio Buttons Addons

Similarly, you can place checkbox or radio button within input group’s addon instead of text.

— The output of the above example will look something like this:

Placing Multiple Inputs or Addons

You can also place multiple inputs side-by-side within an input group easily, like this:

— The output of the above example will look something like this:

Similarly, you can also place multiple addons side-by-side within an input group. You can also mix it with checkbox and radio inputs, as shown in the following example:

— The output of the above example will look something like this:

Buttons Addons for Form Controls

You can also prepend or append buttons to the form controls like text. Simply, place as many buttons as you like within the .input-group, as shown in the following example:

— The output of the above example will look something like this:

Adding Button Dropdowns

You can even add buttons with dropdowns to a form control if you want to perform more than one action from a button. Also, in case of input group you don’t need the .dropdown wrapper element, which is otherwise normally required. Let’s check out an example:

— The output of the above example will look something like this:

Adding Segmented Dropdown Button Groups

Similarly, you can define the segmented dropdown button group where dropdown button is placed besides the other buttons, as shown in the following example:

— The output of the above example will look something like this:

Height Sizing of Input Groups

You can also add the relative form sizing classes such as .input-group-lg or .input-group-sm to the .input-group element itself to make it larger or smaller in height.

The contents within the .input-group will automatically resize — there is no need for repeating the form control size classes on each element. Here’s an example:

Example

Try this code

»

<!-- Larger input group -->
<div class="input-group input-group-lg">
    <span class="input-group-text">Large</span>
    <input type="text" class="form-control">
</div>
        
<!-- Default input group -->
<div class="input-group mt-2">
    <span class="input-group-text">Default</span>
    <input type="text" class="form-control">
</div>
        
<!-- Smaller input group -->
<div class="input-group input-group-sm mt-2">
    <span class="input-group-text">Small</span>
    <input type="text" class="form-control">
</div>

— The output of the above example will look something like this:

Advertisements