Bootstrap Input Groups

In this section we will describe the input groups in bootstrap. The input groups in bootstrap are considered as the extended form controls. The input groups can be used to prepend and append the text based or button based inputs. We can add elements in the input field by adding the prepended and appended content in the input field.

In a .form- control-, elements can be prepended and appended by using the following method:

  1. Wrap the element in the <div> tag and use the class .input- group.
  2. Within the same <div> tag, add the content inside the <span> tag and use the class .input- group- addon.
  3. Add this <span> tag either before or after the input element.

It should be noted that input group should not be used with the form group. And do not use <select> element.


Basic Input Groups:

Consider the following example in which basic input group is demonstrated:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js ” >< /script >

< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >

</ head >

< body >

< div style = “padding: 50px 150px 15px;” >

< 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 = “Your email” >

</ div >

< br >

< div class = “input- group” >

< input type = “text” class = “form- control” >

< span class = “input-group- addon” > % </ span >

</ div >

< br >

< div class = “input- group” >

< span class = “input- group- addon” > % </ span >

< input type = “text” class =” form- control” >

< span class = “input- group- addon” > % </ span >

</ div >

</ form >

</ div >

< /body >

</ html >

The above example will generate the following result:

OUTPUT:

your email


Input Group Sizing:

The size of the input group can be changed in bootstrap by using the classes  .input- group- lg, .input- group- sm, and .input- group- xs.

Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = “/ scripts / jquery. min. js ” >< /script >

< script src = “/ bootstrap/ js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< div style = “padding: 50px 150px 15px;” >

< 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 = “Your Email” >

</ div >

< br >

< div class = “input- group” >

< span class = “input- group- addon” > % </ span >

< input type = “text” class = “form- control” placeholder = “Your Email” >

</ div >

< br >

< div class = “input- group input- group- sm” >

< span class = “input- group- addon” > % </ span >

< input type = “text” class = “form- control” placeholder = “Your Email” >

</ div >

</ form >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Input Group Sizing


Checkboxes and Radio Addons:

Consider the following example in which we appended the checkboxes and not the text:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts /jquery. min. js ” ></ script >

< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >

</ head >

< body >

< div style = “padding: 50px 150px 15px;” >

< form class = ” bs- example bs- example- form” role = “form” >

< div class = “row” >

< div class = “col- lg- 4” >

< div class = “input- group” >

< span class = “input- group- addon” >

< input type = “checkbox” >

</ span >

< input type = “text” class = “form- control” >

</ div >

</ div >< br >

< div class = “col- lg- 4” >

< div class = “input- group” >

< span class = “input- group- addon” >

< input type = “radio” >

</ span >

< input type = “text” class = “form- control” >

</ div >

< /div >

</ div >

</ form >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Checkboxes and Radio Addons


Button Addons:

The buttons in the input groups can also be appended by using the class .input – group- btnto wrap buttons. When we use this class the .input-group- addon class is not used. We use the class .input-group- btn because the built in browser styles cannot be overridden. Consider the following example in which we have used this class:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” /bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >

< script src = ” / scripts/ jquery. min. js” ></ script >

< script src = “/ bootstrap / js / bootstrap. min. js ” >< /script >

</ head >

< body >

< div style = “padding: 80px 80px 20px;” >

< form class = “bs- example bs- example- form” role = “form” >

< div class = “row” >

< div class = “col- lg- 4” >

< div class = “input- group” >

< span class = “input- group- btn” >

< button class = “btn btn- default” type = “button” >

Enter

</ button >

</ span >

< input type = “text” class = “form- control” >

</ div >

</ div >< br >

< div class = “col- lg- 4” >

< div class = “input- group” >

< input type = “text” class = “form- control” >

< span class = “input- group- btn” >

< button class = “btn btn- default” type = “button” >

Enter

</ button >

</ span >

</ div >

</ div >

</ div >

</ form >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Button Addons


Buttons with Dropdowns:

In bootstrap we can also add buttons to dropdown menus in input groups. We can do this by wrapping the button and dropdown menu in the class .input-group-btn. Consider the following example in which we have done this:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js” ></ script >

< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >

</ head >

< body >

< div style = “padding: 80px 80px 20px;” >

< form class = “bs- example bs- example- form” role = “form” >

< div class = “row” >

< div class = “col- lg- 4” >

< div class = “input- group” >

< div class = “input- group- btn” >

< button type = “button” class = “btn btn- default dropdown- toggle”

data- toggle = “dropdown” >

Programming Languages

< span class = “caret” ></ span >

</ button >

< ul class = “dropdown- menu” >

< li > C++ </ li >

< li > Java </ li >

< li > Matlab </ li >

</ ul >

</ div >

< input type = “text” class = “form- control” >

</ div >

</ div >< br >

< div class = “col- lg- 4” >

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

Programming Languages

< span class = “caret” ></ span >

</ button >

< ul class = “dropdown- menu pull- right” >

< li > C++ </ li >

< li > Java </ li >

< li > Matlab </ li >

Programming Languages

</ ul >

</ div >

</ div >

</ div >

</ div >

</ form >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Buttons with Dropdowns


Segmented Buttons:

The segment button dropdowns can be added in the input groups by simply adding the primary action in the dropdown. Consider the following example in which we have done this:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div style = “padding: 80px 80px 20px;”>

<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”>Programming Languages</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>C++</li>

<li>Java</li>

<li>Matlab</li>

</ul>

</div>

<input type = “text” class = “form-control”>

</div>

</div><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”>

Programming Languages

</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>C++</li>

<li>Java</li>

</ul>

</div>

</div>

</div>

</div>

</form>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Segmented Buttons