Inputs groups are special containers that have a form input and some text or icon attached to them that enhances the readability of the input.
Bootstrap Basic Input Groups
Here are the basic steps for creating and input group:
- The basic contextual class needed for an input group is the .input-group class. As told before, this is just a container that will add an icon, text or a button at either or both sides of the input as a “help text”.
- The two contextual classes that decide whether the “help text” comes before or after the input are:
- .input-group-prepend: to add the help text in front of the input
- .input-group-append to add help text behind the input.
- Finally, we will add the .input-group-text class which will style the specified help text.
Here’s the sample code for illustration:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input class="form-control" placeholder="Username" type="text"> </div> <div class="input-group mb-3"> <input class="form-control" placeholder="Your Email" type="text"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div> </form> |
To ensure proper margin-bottom for the input group, you can use the utility class .mb-3
Bootstrap Input Group Sizing
The size of the input groups can be determined using following two classes:
- .input-grp-sm: Small size
- .input-grp-lg: Large size
Check out the code implementation for the same:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input class="form-control" type="text"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input class="form-control" type="text"> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input class="form-control" type="text"> </div> </form> |
Bootstrap Multiple Inputs and Helpers
You can have more than one inputs or addons. Observer the code below to know more:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!-- Multiple inputs --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input class="form-control" placeholder="First Name" type="text"> <input class="form-control" placeholder="Last Name" type="text"> </div> </form> <!-- Multiple addons / help text --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input class="form-control" type="text"> </div> </form> |
Bootstrap Input Group with Check boxes and Radio button
The input groups aren’t restricted to text icons. You can also use radio buttons and checkboxes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input class="form-control" placeholder="Some text" type="text"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio"> </div> </div> <input class="form-control" placeholder="Some text" type="text"> </div> |
Bootstrap Input Group Buttons
Following code is an example of using different type of buttons in input groups
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Basic Button</button> </div> <input class="form-control" placeholder="Some text" type="text"> </div> <div class="input-group mb-3"> <input class="form-control" placeholder="Search" type="text"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input class="form-control" placeholder="Something clever.." type="text"> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> |
Bootstrap Input Group with Dropdown Button
To add a dropdown button in the input group you don’t require to use the .dropdown wrapper. See the code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="input-group mt-3 mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input class="form-control" placeholder="Username" type="text"> </div> |