What are Button Groups in Bootstrap ?
“Button Groups” in Bootstrap is a class of name “btn-group” which is used to create series of buttons in groups (without spaces) vertically or horizontally.
This is the basic syntax of the button group class where each button has its own class of “btn”.
<div class="btn-group"> <button type="button" class="btn">Click</button> </div>
Buttons have a default border-radius on the first and last buttons of the group.
Adding Styles on Buttons: Bootstrap allows you to add styles to your buttons using the following classes:
Sizing of your Buttons: Bootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of “btn-group-*” to your “btn-group” class. No need to add separate classes to each button.
All 4 sizes can be used as follows:
Vertical Button Groups: Bootstrap also supports vertical button groups stacked in a vertical manner rather than horizontal. Use the class “btn-group-vertical” to create a vertical button group:
Nesting of Buttons: Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of “btn-group” within your main “btn-group” class to have a dropdown menu within your button: