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-addon and 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.

示例

Try this code »

```
<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>
```

— 上面示例的输出将如下所示：

Checkboxes and Radio Buttons Addons

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

示例

Try this code »

```
<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>
```

— 上面示例的输出将如下所示：

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.

示例

Try this code »

```
<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>
```

— 上面示例的输出将如下所示：

Adding Button Dropdowns to Text Inputs

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

示例

Try this code »

```
<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>
```

— 上面示例的输出将如下所示：

Adding Segmented Dropdown Button Groups

Similarly, you can define the segmented dropdown button group where dropdown button is placed besides the other buttons.

示例

Try this code »

```
<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>
```

— 上面示例的输出将如下所示：

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.

示例

Try this code »

```
<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>
```

Bootstrap Input Groups

Extending Form Controls with Bootstrap

Creating Prepended and Appended Inputs

示例

Checkboxes and Radio Buttons Addons

示例

Buttons Addons for Text Inputs

示例

Adding Button Dropdowns to Text Inputs

示例

Adding Segmented Dropdown Button Groups

示例

Height Sizing of Input Groups

示例

关于我们

联系方式

互动工具