if you are new to Bootstrap.
Objective
The main objective of this article is to learn the Button Groups and Button Toolbars in Bootstrap.
Using Bootstrap code
We have btn-group class in bootstrap.css that is used to group the buttons.
Observe the below example code of grouping buttons
<div class="btn-group">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>The above code will gives you the following output in your browser
There is btn-group-vertical to arrange and group them in vertical manner.
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>Change in the code like above gives the following change in your browser
Different Sizes of Button Groups:
There are different sizes of btn-group classes. They are btn-group-lg(forlarge button group), btn-group-sm(for small button group) and btn-group-xs(for extra small buttons).
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
<hr />
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
<hr />
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
</div>If you observe the above code, there are large, small and extra small button group classes which looks like below
Now, for vertical Button Groups,
<div>
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
<div class="btn-group-vertical btn-group-sm">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
<div class="btn-group-vertical btn-group-xs">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Copy all</button>
<button type="button" class="btn btn-info">Paste</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
</div>We have added
vertical in the above code which result in following output
Checkbox and RadioButton Functionalities:
There are predefined classes for Checkbox and RadioButton in bootstrap.css.
For CheckBox Functionality,
<div class="btn-group" data-toggle="buttons">
<span class="btn btn-danger">
<input type="checkbox" name="options"> Audi
</span>
<span class="btn btn-danger">
<input type="checkbox" name="options"> Mercedes
</span>
<span class="btn btn-danger">
<input type="checkbox" name="options"> BMW
</span>
<span class="btn btn-danger">
<input type="checkbox" name="options"> Ferrari
</span>
</div>In the above code, we are using
checkbox class to perform Checkbox action.
Run the above code in your browser to see the output something like below
If you observe the above figure, Both Audi and Mercedes are Checked and remaining two are Unchecked.'
For RadioButton Functionality, Just replace checkbox with radio like in the below code.
<div class="btn-group" data-toggle="buttons">
<span class="btn btn-danger">
<input type="radio" name="options"> Audi
</span>
<span class="btn btn-danger">
<input type="radio" name="options"> Mercedes
</span>
<span class="btn btn-danger">
<input type="radio" name="options"> BMW
</span>
<span class="btn btn-danger">
<input type="radio" name="options"> Ferrari
</span>
</div>This code will gives you the RadioButton features in your browser as following
In the above figure, only Mercedes is checked and you are not allowed to check multiple which means the radio.
Button Toolbars:
We have btn-toolbar class in bootstrap.css which is used to create a toolbar. Lets see creating a toolbar with some elements through below code,
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-home"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-book"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-gift"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-camera"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-music"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-film"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-cog"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-collapse-down"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-collapse-up"></span></button>
</div>
</div>In the above code, we are using some Glyphicons of Bootstrap as tool elements. If you run this code in your browser, you will see the output something like below
We can also place the Toolbar some elements like in panel, well etc.
Just observe the below code in which we are going to place our Toolbar in a Panel.
<div class="panel panel-primary">
<div class="panel-heading"><p class="panel-title">ToolBox</p></div>
<div class="panel-body">
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-home"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-book"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-gift"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-camera"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-music"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-film"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-cog"></span></button>
</div>
<div style="float:right;">
<div class="btn-group">
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-collapse-down"></span></button>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-collapse-up"></span></button>
</div>
</div>
</div>
</div>
</div>This will places our toolbar in a Panel like in the below picture
Conclusion
In this article, we have seen Button Groups and Button Toolbars of Bootstrap. Hope you understand. we will see some more Bootstrap button actions with JavaScript. If you have any doubt in this topic, please feel free to ask below.
Thanks for reading.