Bootstrap 4 button groups are a series of buttons together on a single line or stack them in a vertical column.
Note: Please keep in mind that the button group is a collection of buttons that could be aligned either horizontally or vertically.
Process to create button group:
.btn-group
to the button group container.
.btn
and button background contextual classes btn-*
to the every <button>
,<a>
or <input>
element base class.
General Syntax
<div class="btn-group">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-success">Substract</button>
<button type="button" class="btn btn-info">Divide</button>
</div>
Source Code
<div class="container my-3 text-center">
<div class="btn-group">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-success">Substract</button>
<button type="button" class="btn btn-info">Divide</button>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:In the above example,.btn-group
,.btn
followed by one of the background contextual classes (.btn-*
) is used to create button group.
It combines set of button group into button toolbar.Utility classes play vital role to provide space between buttons group.
Follow the following steps to make button toolbar:
.btn-toolbar
to the button group container.
.btn-group
to the every button container.
.btn
& contextual classes btn-*
to the every <button>
container.
btn-primary
, btn-secondary
,btn-success
, btn-danger
,btn-warning
, btn-info
,btn-dark
, btn-light
, btn-link
.
General Syntax
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"></div>
Source Code
<div class="container my-2">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-secondary">Edit</button>
<button type="button" class="btn btn-info">Delete</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success">Result</button>
<button type="button" class="btn btn-warning">Test</button>
<button type="button" class="btn btn-success">Quiz</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">Score</button>
</div>
</div>
</div>
Try it yourself
Source Code : Output
Note:Please keep in mind that the button toolbar is a collection of button groups.Although button group is a collection of buttons.
To control the size of button group,follow the given below instructions:
.btn-group-lg
to the button container i.e having .btn-group
.
.btn-group-sm
to the button container i.e having .btn-group
.
General Syntax
<div class="btn-group btn-group-lg" role="group" ></div>
<div class="btn-group btn-group-sm" role="group" ></div>
Source Code
<div class="container mt-4">
<div class="row">
<div class="col-sm-6">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-success">Larger Button Group</button>
</div>
</div>
<div class="col-sm-6">
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-primary">Smaller Button Group</button>
</div>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
Please keep in mind that button group size can be controlled by .btn-group-lg
& .btn-group-sm
.To make larger button group,assign .btn-group-lg
to the button container while to make smaller button group, assign .btn-group-sm
to the button container having .btn-group
.
To create vertical button group,you have to apply .btn-group-vertical
to parent button container base class.
General Syntax
<div class="btn-group-vertical"></div>
Source Code
<div class="container mt-4">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-success">Web Development</button>
<button type="button" class="btn btn-info">Graphics Design</button>
<button type="button" class="btn btn-primary">AppDevelopment</button>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
Vertical button group can easily created by assigning .btn-group-vertical
to the button
container.