Bootstrap Button Groups
Bootstrap button groups are used to group a series of buttons together on a single line or stack them in a vertical column.
General Syntax
<div class="btn-group">
<button type="button" class="btn btn-info">Button 1</button>
</div>
Source Code
<div class="container text-center my-4">
<h2 class="my-5">Button Group</h2>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left Button</button>
<button type="button" class="btn btn-secondary">Middle Button</button>
<button type="button" class="btn btn-secondary">Right Button</button>
</div>
</div>
<!--/container-->
Code Explanation
Please keep in mind that button group can also be created with <a> & <input> element. Just apply above mention step to the described element and create a button group.
Vertical Button Group
Place all the buttons inside the button group container and assign the .btn-group-vertical class to the button group container's base class.
Example
Source Code
<div class="btn-group-vertical">
<button type="button" class="btn btn-secondary">Top Button</button>
<button type="button" class="btn btn-secondary">Middle Button</button>
<button type="button" class="btn btn-secondary">Bottom Button</button>
</div>
Creating Button Group Using Hyperlink
Place all the hyperlink element inside the button group container and assign .btn followed by .btn-* class to the every hyperlink element base class. At the end, assign .btn-group class to the button group container base class.
Example
Source Code
<div class="container my-3">
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link 1</a>
<a href="#" class="btn btn-primary">Link 2</a>
</div>
</div>
Checkbox Button Group
To create a checkbox button group, assign all the checkboxes inside the checkbox container having class .btn-group and also assign .btn-check to the checkbox base class and .btn and .btn-outline-* to the label element base class.
Example
General Syntax
<div class="btn-group" >
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-*" for="btncheck1">Checkbox 1</label>
</div>
Source Code
<div class="container">
<div class="btn-group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" />
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" />
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
</div>
</div>
Radio Button Group
To create a radio button group, assign all the radio buttons inside the radio buttons container having class .btn-group and also assign .btn-check to the radio base class and .btn and .btn-outline-* to the label element base class.
Example
General Syntax
<div class="btn-group" role="group" >
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
</div>
Source Code
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked />
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" />
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>
Button Group Size
To control the size of every button in button group, add .btn-group-* to the container(<div>) having .btn-group.
Example
General Syntax
<div class="btn-group btn-group-lg " > </div>
<div class="btn-group btn-group-sm " > </div>
Source Code
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-6">
<h3>Large Button Group</h3>
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
<div class="col-12 col-sm-6">
<h3>Small Button Group</h3>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button" />
<input type="submit" class="btn btn-info" value="Submit Button" />
</div>
</div>
</div>
Code Explanation
To create small & large button group ,assign .btn-group-lg & .btn-group-sm to the button group container respectively.
Outline Button Group
Example
General Syntax
<div class="btn-group">
<button type="button" class="btn btn-outline-*">Button1</button>
</div>
Source Code
<div class="container">
<h2>Outline Button Group</h2>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Button1</button>
<button type="button" class="btn btn-outline-primary">Button2</button>
<button type="button" class="btn btn-outline-primary">Button3</button>
</div>
</div>
<!--/container-->
Code Explanation
Note:
Place all the buttons inside the container and assign .btn-group to the base class of the container and also assign
.btn & .btn-outline-* to every button base class.
Button toolbar
It combines a set of button groups into a button toolbar. Utility classes play a vital role in providing space within the group.
To make a button toolbar, you must have to provide a button group container i.e parent container to btn-toolbar class while every button group parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class. To make a button toolbar, you must have to provide a button group container i.e parent container to the btn-toolbar class while every button groups the parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class.
Example
Source Code
<div class="container mt-5">
<h2>Button Toolbar</h2>
<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-secondary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Button 3</button>
<button type="button" class="btn btn-secondary">Button 4</button>
</div>
</div>
</div>
<!--/container-->
Code Explanation
Note: To create a button group toolbar, assign all the button groups inside the container and assign the .btn-toolbar class.
Web Tutorials
