Bootstrap Button Groups

Bootstrap 5 Button Groups

Button Groups

Bootstrap allows you to group a series of buttons together on a single line within a button group.

Visually, this looks like:

Apple Samsung Sony (Buttons displayed inline)

Use a

element with class .btn-group to create a button group:

<html>
 <head>
   <!-- Ensure Bootstrap CSS is linked -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <!-- Ensure Bootstrap JS bundle is linked if using dropdowns or other JS components -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Tip: Instead of applying button sizing classes (e.g., .btn-lg, .btn-sm) to every button in a group, add a sizing class like .btn-group-lg or .btn-group-sm to the .btn-group container itself to size all buttons within it.

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
 </body>
</html>

Vertical Button Groups

Bootstrap also supports vertical button groups, stacking buttons on top of each other.

Visually, this looks like buttons stacked vertically.

Use the class .btn-group-vertical to create a vertical button group:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
 </body>
</html>

Justified Button Groups (Full Width)

The .btn-group-justified class from older Bootstrap versions has been removed in Bootstrap 4 and 5. To make a button group span the full width of its parent, you can use flex utilities. Each button or a wrapper around it can be made to fill the available space.

Example with <button> elements filling available width:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group d-flex" role="group" aria-label="Justified button group example">
   <button type="button" class="btn btn-primary flex-fill">Apple</button>
   <button type="button" class="btn btn-primary flex-fill">Samsung</button>
   <button type="button" class="btn btn-primary flex-fill">Sony</button>
  </div>
 </body>
</html>

Example with <a> elements, where each is wrapped in a .btn-group that fills space:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="d-flex" aria-label="Justified link button group example">
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Apple</a>
   </div>
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Samsung</a>
   </div>
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Sony</a>
   </div>
  </div>
 </body>
</html>

You can nest button groups to create dropdown menus within a button group. Make sure to include Bootstrap’s JavaScript (usually the bundle) for dropdown functionality.

Visually: Apple | Samsung | Sony (dropdown) [Tablet, Smartphone]

Example:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Sony
    </button>
    <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tablet</a></li>
     <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
   </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Note: data-bs-toggle="dropdown" is used for the dropdown trigger, and dropdown-item class for links within the menu. The caret/arrow is automatically added by Bootstrap 5 CSS.

Split Button Dropdowns

Split button dropdowns separate the action of the button from the toggle for the dropdown menu.

Visually: Sony (button) | (dropdown toggle) [Tablet, Smartphone]

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Split button dropdown example">
   <button type="button" class="btn btn-primary">Sony</button>
   <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Tablet</a></li>
    <li><a class="dropdown-item" href="#">Smartphone</a></li>
   </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

The .dropdown-toggle-split class provides appropriate spacing for the split part. .visually-hidden is used for accessibility on the toggle part.