Bootstrap Input Groups

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:

Example

<div class="row g-2">
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">
                <span class="bi-person"></span>
            </span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">            
            <input type="text" class="form-control" placeholder="Amount">
            <span class="input-group-text">.00</span>
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">https://www.</span>
            <input type="text" class="form-control" placeholder="Domain name">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="text" class="form-control" placeholder="US Dollar">
            <span class="input-group-text">.00</span>
        </div>
    </div>
</div>

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

Bootstrap Prepended and Appended Inputs

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:

Example

<div class="row g-2">
    <div class="col-12">
        <div class="input-group">            
            <span class="input-group-text">Address</span>
            <textarea class="form-control"></textarea>
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <label class="input-group-text">Country</label>
            <select class="form-select">
                <option selected>Choose...</option>
                <option>France</option>
                <option>Germany</option>
                <option>Hungary</option>
            </select>
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <select class="form-select">
                <option selected>Choose...</option>
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
            <button type="button" class="btn btn-secondary">Submit</button>
        </div>
    </div>
</div>

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

Bootstrap Prepended and Appended Select box and Textarea

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

Example

<div class="input-group">
    <input type="file" class="form-control">
    <button type="button" class="btn btn-secondary">Upload</button>
</div>

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

Bootstrap Prepended and Appended Select box and Textarea

Checkboxes and Radio Buttons Addons

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

Example

<div class="row">
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">
                <input type="checkbox" class="form-check-input mt-0">
            </span>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">
                <input type="radio" class="form-check-input mt-0">
            </span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

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

Bootstrap Input groups with Checkbox and Radio Buttons

Placing Multiple Inputs or Addons

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

Example

<div class="input-group">
    <span class="input-group-text">Your Name</span>
    <input type="text" class="form-control" placeholder="First name">
    <input type="text" class="form-control" placeholder="Last name">
</div>

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

Bootstrap Input Group with Multiple Inputs

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:

Example

<div class="row">
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">
                <input type="checkbox" class="form-check-input mt-0">
            </span>
            <span class="input-group-text">$</span>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

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

Bootstrap Input Group with Multiple Addons

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:

Example

<div class="row">
    <div class="col-5">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search...">
            <button type="button" class="btn btn-secondary">
                <i class="bi-search"></i>
            </button>
        </div>
    </div>
    <div class="col-7">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Type something...">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-danger">Reset</button>
        </div>
    </div>
</div>

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

Bootstrap Input groups with Buttons

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:

Example

<div class="row">
    <div class="col-6">
        <div class="input-group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
            </div>
        </div>
    </div>
</div>

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

Bootstrap Input groups with Button Dropdowns

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:

Example

<div class="row">
    <div class="col-6">
        <div class="input-group">
            <button type="button" class="btn btn-outline-secondary">Action</button>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <button type="button" class="btn btn-outline-secondary">Action</button>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
            </div>
        </div>
    </div>
</div>

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

Bootstrap Input groups with Split Button Dropdowns

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

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

Bootstrap Input Group Height Sizing

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *