Microsoft Dot Net Master: 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 form controls, however it is limited to textual input only.

In the following sections you'll see how to extend the text based <input> by adding the text or buttons before, after, or on both sides of it to make your form more attractive.

Creating Prepended and Appended Inputs

You can add text and icons or buttons before or after any text-based input.

To prepend or append text and icons to an input:

Wrap the text or icon within a <span> element having the class .input-group-addonand place it before or after the <input> element.
Wrap both the <span> and text-based <input> element within a <div> element and apply the class .input-group on it.

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

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

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

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

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

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

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

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</form>
```

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

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-6">
```
```
          <div class="input-group">
```

            <span class="input-group-addon">

```
              <input type="checkbox">
```
```
            </span>
```

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

```
          </div>
```
```
        </div>
```
```
        <div class="col-xs-6">
```
```
          <div class="input-group">
```

            <span class="input-group-addon">

```
              <input type="radio">
```
```
            </span>
```

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

```
          </div>
```
```
        </div>
```
```
      </div>
```
```
</form>
```

— 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. Wrap buttons within the <span>element and apply the class .input-group-btn, instead of .input-group-addon.

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-5">
```
```
            <div class="input-group">
```

                <input type="text" class="form-control" placeholder="Search&hellip;">

                <span class="input-group-btn">

                    <button type="button" class="btn btn-default">Go</button>

```
                </span>
```
```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-7">
```
```
            <div class="input-group">
```

                <input type="text" class="form-control"  placeholder="Type something&hellip;">

                <span class="input-group-btn">

                    <button type="button" class="btn btn-default">Action</button>

                    <button type="button" class="btn btn-default">Options</button>

```
                </span>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</form>
```

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

Adding Button Dropdowns to Text Inputs

You can also create dropdown buttons if you want to do more than one action from a button.

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-6">
```
```
            <div class="input-group">
```

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

                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-6">
```
```
            <div class="input-group">
```

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

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

                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

                    <ul class="dropdown-menu pull-right">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</form>
```

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

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-6">
```
```
            <div class="input-group">
```

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

                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>

                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

                        <span class="caret"></span>

                        <span class="sr-only">Toggle Dropdown</span>

```
                    </button>
```

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-6">
```
```
            <div class="input-group">
```

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

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

                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>

                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

                        <span class="caret"></span>

                        <span class="sr-only">Toggle Dropdown</span>

```
                    </button>
```

                    <ul class="dropdown-menu pull-right">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</form>
```

— 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 itself to make it larger or smaller.

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

Example

```
<form>
```
```
    <div class="row">
```
```
        <div class="col-xs-4">
```

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

                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```

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

                <span class="input-group-addon">

                    <input type="checkbox">

```
                </span>
```

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```

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

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

                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>

                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

                        <span class="caret"></span>

                        <span class="sr-only">Toggle Dropdown</span>

```
                    </button>
```

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```

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

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
    <br>
```
```
    <div class="row">
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

                <span class="input-group-addon">

                    <input type="checkbox">

```
                </span>
```

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

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

                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>

                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

                        <span class="caret"></span>

                        <span class="sr-only">Toggle Dropdown</span>

```
                    </button>
```

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```

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

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
    <br>
```
```
    <div class="row">
```
```
        <div class="col-xs-4">
```

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

                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```

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

                <span class="input-group-addon">

                    <input type="checkbox">

```
                </span>
```

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```

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

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

                    <button tabindex="-1" class="btn btn-default" type="button">Action</button>

                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

                        <span class="caret"></span>

                        <span class="sr-only">Toggle Dropdown</span>

```
                    </button>
```

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li class="divider"></li>

                        <li><a href="#">Separated link</a></li>

```
                    </ul>
```
```
                </div>
```

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

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</form>
```