In the previous chapter, we learned how to extend the default style of buttons using bootstrap classes. Now, we will learn how to group a series of buttons together on a single line using the bootstrap button group component.
In bootstrap, to create button groups we need to wrap a series of buttons with .btn
class in <div>
element and apply .btn-group
class on it.
Following is the example of creating a group of buttons together on a single line using .btn-group
class in bootstrap.
Live Preview <div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Tutorials</button>
<button type="button" class="btn btn-primary">Contact</button>
</div>
If you observe the above example, we created a series of buttons with .btn
class and wrapped inside of <div>
element and applied .btn-group
class on it to group buttons together on a single line.
The above example will return the result as shown below.
![Bootstrap button groups example result](/images/bootstrap/bootstrap_button_groups_example_result.PNG)
Bootstrap Button Groups Toolbar
In bootstrap, we can create a button toolbar component by combining the sets of different button groups in <div>
element and apply .btn-toolbar
class on it like as shown below.
Live Preview <div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary"><b>B</b></button>
<button type="button" class="btn btn-primary"><i>I</i></button>
<button type="button" class="btn btn-primary"><u>U</u></button>
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-align-right"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-list"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-list-ol"></i></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary"><i class="fa fa-code"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-picture-o"></i></button>
</div>
</div>
If you observe the above example, we added a utility class .mr-2
along with .btn-group
classes to create a space between the button groups.
The above example will return the result as shown below.
![Bootstrap button groups toolbars example result](/images/bootstrap/bootstrap_button_groups_toolbar_example_result.png)
Bootstrap Button Group Sizing
Instead of adding button sizing classes on every button in a group, you can directly apply the classes like .btn-group-lg
or .btn-group-sm
on button group to create smaller or larger button groups like as shown below.
Live Preview <div class="btn-group mb-2 btn-group-lg">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Tutorials</button>
<button type="button" class="btn btn-primary">Articles</button>
</div>
<br>
<div class="btn-group mb-2">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Tutorials</button>
<button type="button" class="btn btn-primary">Articles</button>
</div>
<br>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Tutorials</button>
<button type="button" class="btn btn-primary">Articles</button>
</div>
If you observe the above example, we created button groups with .btn-group-lg and .btn-group-sm classes to create larger and smaller button groups based on our requirements.
The above example will return the result as shown below.
![Bootstrap button groups sizing example result](/images/bootstrap/bootstrap_button_groups_sizing_example_result.PNG)
Bootstrap Nesting Button Groups
In bootstrap, we can create nesting of button groups by placing one button group (.btn-group
) within another button group (.btn-group
). The nesting button groups are useful when you want to create dropdown menus mixed with a series of buttons.
Live Preview <div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Articles</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Tutorials
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Java</a>
<a class="dropdown-item" href="#">Database</a>
</div>
</div>
</div>
The above example will return the result as shown below.
![Bootstrap nesting button groups example result](/images/bootstrap/bootstrap_nesting_button_groups_example_result.gif)
Bootstrap Vertical Button Groups
To make the button groups appear vertically rather than horizontal, you need to add .btn-group-vertical
class instead of .btn-group
class to the button groups like as shown below.
Live Preview<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Articles</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Tutorials
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Java</a>
<a class="dropdown-item" href="#">Database</a>
</div>
</div>
</div>
The above example will return the result as shown below.
![Bootstrap vertical button groups example result](/images/bootstrap/bootstrap_vertical_button_groups_example_result.gif)
Bootstrap Justified Button Groups
By applying bootstrap .d-flex
class to button groups (.btn-group
), we can create justified button groups to adjust the width based on the device size.
Live Preview <div class="btn-group d-flex">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">Articles</button>
<button type="button" class="btn btn-primary">Tutorials</button>
</div>
If you observe the above example, we added .d-flex
class along with .btn-group
class to create justified button groups based on our requirements.
The above example will return the result as shown below.
![Bootstrap justified button groups example result](/images/bootstrap/bootstrap_justified_button_groups_example_result.PNG)
This is how we can create button groups by wrapping a series of buttons in <div>
element based on our requirements.