Bootstrap 5 Button Group: How To Create & Use It Easily?

Bootstrap 5 Button Group

Bootstrap 5 button group component is used to group a series of buttons together on a single line or stack them in a vertical column.

Steps to create a Bootstrap 5 button group:

• Assign .btn-group to create horizontal button groups and .btn-group-vertical to vertical button group to the parent container(i.e <div>) base class.
• Assign .btn along with contextual .btn-* to the <button> base class.

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-->

Vertical Button Group

Place all the buttons inside the button group container and assign .btn-group-vertical class to the button group container base class.

General Syntax

<div class="btn-group-vertical ">Button Group Container</div>

Source Code

<div class="container my-2">
 <h2 class="my-5">Vertical Button Group</h2>
 <div class="btn-group-vertical" role="group" aria-label="Basic example">
  <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>
</div>
<!--/container-->

Creating Button Group Using Hyperlink

Place all the hyperlink elements inside the button group container and assign .btn followed by .btn-* class to every hyperlink element base class. In the end, assign .btn-group a class to the button group container base class.

General Syntax

<div class="btn-group">
  <a href="#" class="btn btn-*" >link</a>
</div>

Source Code

<div class="container my-3">
 <h2 class="my-5">Creating Button Group Using Hyperlink</h2>
 <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>
<!--/container-->

Checkbox Button Group

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>

To read more about the Bootstrap 5 button group, click here.