Bootstrap Input Groups - Bootstrap

What are Input Groups?

This section clarifies about one more feature Bootstrap supports, the Input Groups. Input groups are prolonged Form Controls. Using input groups one can simply remove and add text or buttons to the text-based inputs.

By adding prepended and added content to an input field, you can add shared features to the user’s input. For instance, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be mutual for your application interface.

To remove or attach elements to a .form-control−

• Wrap it in a <div> with class .input-group

• As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon.

• Now place this <span> either before or after the <input> element.

For cross browser compatibility, avoid using <select> elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.

Basic Input Group

The following example demonstrates basic input group −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "input-group"> <span class = "input-group-addon">@</span> <input type = "text" class = "form-control" placeholder = "twitterhandle"> </div> <br> <div class = "input-group"> <input type = "text" class = "form-control"> <span class = "input-group-addon">.00</span> </div> <br> <div class = "input-group"> <span class = "input-group-addon">$</span> <input type = "text" class =" form-control"> <span class = "input-group-addon">.00</span> </div> </form> </div>

What is Input Group Sizing?

Input Group Sizing

You can alter the size of the input collections, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.

Following examples demonstrates this −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "input-group input-group-lg"> <span class = "input-group-addon">@</span> <input type = "text" class = "form-control" placeholder = "Twitterhandle"> </div> <br> <div class = "input-group"> <span class = "input-group-addon">@</span> <input type = "text" class = "form-control" placeholder = "Twitterhandle"> </div> <br> <div class = "input-group input-group-sm"> <span class = "input-group-addon">@</span> <input type = "text" class = "form-control" placeholder = "Twitterhandle"> </div> </form> </div>

How to attach and detach Checkboxes and Radio Addons?

Checkboxes and Radio Addons

You can detach or attach radio buttons and checkboxes in its place of text as verified in the following example −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "row"> <div class = "col-lg-6"> <div class = "input-group"> <span class = "input-group-addon"> <input type = "checkbox"> </span> <input type = "text" class = "form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class = "col-lg-6"> <div class = "input-group"> <span class = "input-group-addon"> <input type = "radio"> </span> <input type = "text" class = "form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>

Button Addons

You can even detach or attach buttons in input groups. Instead of .input-group-addon class, you'll need to use class .input-group-btn to wrap the buttons. This is required due to the default browser styles that cannot be overridden. Following instances proves this −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "row"> <div class = "col-lg-6"> <div class = "input-group"> <span class = "input-group-btn"> <button class = "btn btn-default" type = "button"> Go! </button> </span> <input type = "text" class = "form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class = "col-lg-6"> <div class = "input-group"> <input type = "text" class = "form-control"> <span class = "input-group-btn"> <button class = "btn btn-default" type = "button"> Go! </button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>

how to add Buttons with Dropdowns?

Buttons with Dropdowns

Adding buttons with dropdown menus in input groups can be done by just wrapping the button and dropdown menu in a .input-group-btn class as demonstrated in the following example −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "row"> <div class = "col-lg-6"> <div class = "input-group"> <div class = "input-group-btn"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> DropdownMenu <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type = "text" class = "form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class = "col-lg-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"> DropdownMenu <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><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>

What are Segmented Buttons?

Segmented Buttons

To segment button dropdowns in input groups, use the same overall style as the dropdown button, but improve a main action along with the dropdown as can be seen in the next instance −

<div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "row"> <div class = "col-lg-6"> <div class = "input-group"> <div class = "input-group-btn"> <button type = "button" class = "btn btn-default" tabindex = "-1">Dropdown Menu</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" tabindex = "-1"> <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><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type = "text" class = "form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --><br> <div class = "col-lg-6"> <div class = "input-group"> <input type = "text" class = "form-control"> <div class = "input-group-btn"> <button type = "button" class = "btn btn-default" tabindex = "-1"> Dropdown Menu </button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" tabindex = "-1"> <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><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>