Bootstrap button groups are the feature of bootstrap to group a series of button elements in a single line. This can be useful when you want to create the main menu bar or button toolbar.
You need to just use the predefined bootstrap classes to create a bootstrap button group.
Bootstrap Button Groups to Create Basic Grouping
To create a group of buttons, you have to add the series of buttons inside the <div> element with the class .btn-group
The button can be anchor links or button type element to display as a series in a single line. See the example below to create a group of a button using bootstrap.
|
1 2 3 4 5 6 |
<div class="btn-group"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div> |
Output
The above example contains the four series of button elements to display in groups.
Create Button Toolbar
You can also create a more complex component called button toolbar using bootstrap. To create a button toolbar, you have to wrap the series of .btn-group components inside the .btn-toolbar.
See the example below to create your own button toolbar using bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Five</button> <button type="button" class="btn btn-primary">Six</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Seven</button> <button type="button" class="btn btn-primary">Eight</button> <button type="button" class="btn btn-primary">Nine</button> </div> </div> |
Output
Sizing of Bootstrap Button Groups
If you want to create button and resize it to larger, medium and smaller, you can apply bootstrap classes .btn-group-lg, .btn-group-md, .btn-group-sm and .btn-group-xs to button elements.
You can resize buttons using the above class with the already added class .btn-group to the div element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div><br><br> <div class="btn-group btn-group-md"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div><br><br> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div><br><br> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> </div> |
Output
Nesting Bootstrap Button Groups
If you want to mix the Bootstrap dropdown menus with the button group, you can use nesting of the button groups.
Add the button and the list items inside the div element with the class .btn-group to create a dropdown button component. Now, nesting the component inside another div element with the same class .btn-group containing the series of buttons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="btn-group"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> <div class="btn-group"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> </div> |
Output
The above example contains the series of buttons with the dropdown menu nested inside the button groups.
Vertical Bootstrap Button Groups
To create a vertical series of buttons, you have to wrap the button elements inside the div element with the class .btn-group-vertical.
You can also create a vertical group of buttons and nesting the dropdown button with it. See the example below for the vertical dropdown menu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">One</button> <button type="button" class="btn btn-primary">Two</button> <button type="button" class="btn btn-primary">Three</button> <button type="button" class="btn btn-primary">Fore</button> <div class="btn-group"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> </div> |
Output
Create Justified Bootstrap Button Groups
You can create a stretched and same size buttons in a single line using the class .btn-group-justified with the class .btn-group. However, you have to follow different rules for the anchor links and button types given below.
Justified Anchor links
For anchor links, you have to just include the class .btn-group-justified with the class .btn-group.
|
1 2 3 4 5 6 |
<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">One</a> <a href="#" class="btn btn-primary">Two</a> <a href="#" class="btn btn-primary">Three</a> <a href="#" class="btn btn-primary">Fore</a> </div> |
Output
Justified button type
To create a justified button using button type, you have to put all the buttons inside the <div> tag with class .btn-group-justified and .btn-group.
Now, one thing you should do differently is to wrap each button inside the div element with class .btn-group.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-primary">One</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Two</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Three</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Fore</button> </div> </div> |
Output