Bootstrap Input Groups

In bootstrap, input groups are useful to extend the behavior of textual inputs, selects and custom file upload controls by appending the text, icon or a button on either side of input fields as a help text.

 

To create input groups in bootstrap first, you need to create a container element (<div>) with .input-group class to wrap the textual input elements and add-on elements. After that create another <div> element within the container with .input-group-prepend or .input-group-append class to append the add-on element before or after the input.

 

The .input-group-prepend class is useful to append the add-on elements before the input, whereas the .input-group-append class is useful to append the add-on elements after the input.

 

The add-on elements must be wrapped inside of <span> element with .input-group-text class for proper styling and rendering.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">@</span>

        </div>

        <input type="text" class="form-control" placeholder="Username">

    </div>

    <div class="input-group mb-3">

        <input type="email" class="form-control" placeholder="email">

        <div class="input-group-append">

            <span class="input-group-text">@tutlane.com</span>

        </div>

    </div>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">$</span>

        </div>

        <input type="text" class="form-control" placeholder="Amount">

        <div class="input-group-append">

            <span class="input-group-text">.00</span>

        </div>

    </div>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">TextArea</span>

        </div>

        <textarea class="form-control"></textarea>

    </div>

</form>

If you observe the above example, we used .mb-3 utility class along with other input group classes. Here, the .mb-3 class is used to create a proper bottom margin for input group elements.

 

The above example will return the result like as shown below.

 

Bootstrap input groups example result

Bootstrap Input Group with Multiple Inputs and Addons

In bootstrap, we can also create input groups with multiple inputs and add-ons.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">Search</span>

        </div>

        <input type="text" class="form-control" placeholder="First Name">

        <input type="text" class="form-control" placeholder="Last Name">

    </div>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">Street</span>

            <span class="input-group-text">City</span>

        </div>

        <input type="text" class="form-control" placeholder="Address">

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input groups with multiple inputs example result

Bootstrap Input Groups Sizing

In bootstrap, we can resize the input groups to large or small by using .input-group-lg or .input-group-sm classes.

 

Live Preview

<form>

    <!--Small Size-->

    <div class="input-group input-group-sm mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">Small</span>

        </div>

        <input type="text" class="form-control" placeholder="Username">

    </div>

    <!--Default Size-->

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">Default</span>

        </div>

        <input type="text" class="form-control" placeholder="email">

    </div>

    <!--Large Size-->

    <div class="input-group input-group-lg mb-3">

        <div class="input-group-prepend">

            <span class="input-group-text">Large</span>

        </div>

        <input type="text" class="form-control" placeholder="Amount">

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input group sizing example result

Bootstrap Input Group with Checkboxes and Radios

In previous input group example, we appended text to the input controls. Same way, we can also append the checkboxes and radios to input controls.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <div class="input-group-text">

                <input type="checkbox">

            </div>

        </div>

        <input type="text" class="form-control" placeholder="Username">

    </div>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <div class="input-group-text">

                <input type="radio">

            </div>

        </div>

        <input type="text" class="form-control" placeholder="email">

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input group with checkboxes and radios example result

Bootstrap Input Groups with Buttons

Same like, checkboxes and radio buttons you can also prepend or append the buttons to input controls.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <button class="btn btn-primary" type="button" id="Button2">Search</button>

        </div>

        <input type="text" class="form-control" placeholder="Enter text to search">

    </div>

    <div class="input-group mb-3">

        <input type="text" class="form-control" placeholder="Enter search text">

        <div class="input-group-append">

            <button class="btn btn-success" type="button" id="Button3">Search</button>

        </div>

    </div>

    <div class="input-group mb-3">

        <input type="text" class="form-control" placeholder="Enter username">

        <div class="input-group-append">

            <button class="btn btn-info" type="button" id="Button4">Go</button>

            <button class="btn btn-danger" type="button" id="Button5">Cancel</button>

        </div>

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input groups with buttons example result

Bootstrap Input Group with Button Dropdowns

Same like buttons, checkboxes and radios, you can also prepend or append button dropdowns to input elements based on your requirements.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">

                Payment Dropdown

            </button>

            <div class="dropdown-menu">

                <a class="dropdown-item" href="#">Net Banking</a>

                <a class="dropdown-item" href="#">Credit Card</a>

                <a class="dropdown-item" href="#">Wallets</a>

            </div>

        </div>

        <input type="text" class="form-control" placeholder="Enter amount">

        <div class="input-group-append">

            <span class="input-group-text">$</span>

        </div>

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input group with button dropdown example result

Bootstrap Input Groups with Custom Select

In bootstrap, input groups included a support for custom select to prepend or append input controls.

 

Live Preview

<form>

    <div class="input-group mb-3">

        <div class="input-group-prepend">

            <label class="input-group-text">Payment Type</label>

        </div>

        <select class="custom-select" id="Select1">

            <option selected>Choose...</option>

            <option value="1">Net Banking</option>

            <option value="2">Credit Card</option>

            <option value="3">Wallets</option>

        </select>

        <div class="input-group-append">

            <span class="input-group-text">$</span>

        </div>

    </div>

</form>

The above example will return the result like as shown below.

 

Bootstrap input group with custom select example result

 

This is how the input groups are useful to extend the behavior of input controls by appending the text, icon or a button in either side of input fields as a help text in bootstrap.