BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
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 very flexible and powerful component for creating the interactive and elegant form controls, however it is limited to textual input only.

In the following sections you'll see how to extend text-based input fields by adding the text, icons or 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, use the class .input-group-prepend to place the addons before the input, whereas use the class .input-group-append to place the addons after the input.

Also, be sure to wrap the text or icon in a <span> and apply the class .input-group-text on it for proper rendering and styling. Try out the following example to see how it works:

<div class="row">
    <div class="col-sm-4">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <span class="fa fa-user"></span>
                </span>                    
            </div>
            <input type="text" class="form-control" placeholder="Username">
        </div>
    </div>
    <div class="col-sm-4">
        <div class="input-group">            
            <input type="text" class="form-control" placeholder="Amount">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" placeholder="US Dollar">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
    </div>
</div>

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

Note: Bootstrap's prepending or appending addons feature is only available to text-based inputs. It does not support <select> or <textarea> elements.


Checkboxes and Radio Buttons Addons

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

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

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

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Your Name</span>
    </div>
    <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:

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:

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

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


Buttons Addons for Text Inputs

You can also prepend or append buttons instead of text. Simply, place as many buttons as you like within the .input-group-prepend or .input-group-append, as shown below:

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

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


Adding Button Dropdowns to Text Inputs

You can even add buttons with dropdowns to a text input, 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:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-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>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-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>
</div>

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

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary">Action</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                    <span class="sr-only">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>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary">Action</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                    <span class="sr-only">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>
</div>

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

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

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

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.