Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we will be studying about one more feature that Bootstrap supports, the Input Groups.
Bootstrap input groups are extended Form Controls. By using of input groups, you can easily prepend and append text or buttons to the text-based inputs.
By adding a content that is prepended and appended to an input field, you can include common elements to the user's Input. For example, you can add the dollar symbol, @ for Twitter username, or anything else that might be very common for your application interface.
To prepend or append elements to a .form-control -
Bootstrap input groups are extended Form Controls. By using of input groups, you can easily prepend and append text or buttons to the text-based inputs.
By adding a content that is prepended and appended to an input field, you can include common elements to the user's Input. For example, you can add the dollar symbol, @ for Twitter username, or anything else that might be very common for your application interface.
To prepend or append elements to a .form-control -
- Wrap it in a <div> with .input-group class.
- Within that same <div>, place your extra content inside a <span> with .input-group-addon class.
- Now place this <span> either before or after the <input> element.
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>
Output
When the above example is executed, it will produce the following result -
Input Group Sizing
You can change the size of the input group by including the relative form sizing classes such as the .input-group-lg, .input-group-sm, .input-group-xs to the .input-group itself. The contents within will automatically resize.
Example
Following example 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>
Output
When the above example is executed, it will produce the following result -
Checkboxes and Radio Addons
You can prepend or append radio buttons and checkboxes instead of text.
Example
Following example demonstrates 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-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>
Output
When the above example is executed, it will produce the following result -
Button Addons
You can even prepend or append buttons in input groups. Instead of .input-group-addon class, you will need to use .input-group-btn class to wrap the buttons. This is required due to the default browser styles that can't be overridden.
Example
Following example demonstrates 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>
Output
When the above example is executed, it will produce the following result -
Buttons with Dropdowns
You can add buttons with dropdown menus in input groups by wrapping the button and dropdown menu in a class .input-group-btn.
Example
Following example demonstrates 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"> <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>
Output
When the above example is executed, it will produce the following result -
Segmented Buttons
To segment button dropdowns in the input groups, make use of the same general style as the dropdown button, but add a primary action along with the dropdown.
Example
Following example demonstrates 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"> <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>
Output
When the above example is executed, it will produce the following result -
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Navigation Elements.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
