Bootstrap Button Groups - Naukri Code 360

Q: What is the Bootstrap Button Group?

Bootstrap button group is a series of buttons kept together on a single line/navbar and can be stacked in a vertical column.

Introduction

Bootstrap button group is a series of buttons on a single line/navbar that can be stacked in a vertical column. To align the switch together, it is advantageous. With the help of the bootstrap plugin, we can also see the Javascript checkbox and radio-style behavior.

So for developing a button group, we use the .btn-group class with the parent div. Moreover, we will go through all the classes required, or you can use them to develop a helpful button group for your website.

Note: Add these in the HTML file to make these codes work.buttons

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">

<title>Bootstrap Example</title>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Classes Required

Note - We will discuss these classes more, with an example further in this blog.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container" style="margin-top: 50px">
      <p class="my-3">Default button in bootstrap:</p>
      <div class="btn-group">
        <button type="button" class="btn btn-dark btn-default mx-2">
          Click me
        </button>
      </div>
    </div>
  </body>
</html>

Output

Active Class Example

We can use the .active class to highlight a link in the button in the button group.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are two different types of links:</p>
      <div class="btn-group">
        <a href="#!" class="btn btn-primary active mx-2">Active link</a>
        <a href="#!" class="btn btn-primary">Button</a>
      </div>
    </div>
  </body>
</html>

Output

Role Attribute

An appropriate role attribute must be given to convey that a series of buttons is grouped for assistive technology. We use role = "group" for button groups and role = "toolbar" for button toolbars. These role attributes define the role of an element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container" style="margin-top: 40px">
      <p class="my-3">Button group in bootstrap:</p>
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-success">Right</button>
      </div>
    </div>
  </body>
</html>

Output

Moreover, explicit labels should be taken by groups and toolbars because assistive technologies don't announce them even if the role attribute is present. For example, we use aria-labelledby with aria-label as an alternative. (aria-labelledby is an attribute used in Bootstrap to associate a label with an element, whereas, aria-label is an attribute in Bootstrap that provides a text label for an element that doesn't have a visible label).

Different Button Styles

In bootstrap, there are various different styles in which button groups can be displayed. Let’s discuss these styles with examples of each one by one.

Mixed Style

We can have different colors for every button in eclectic-style button groups.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are buttons with different colors:</p>
      <div class="btn-group">
        <button type="button" class="btn btn-danger mx-2">Left</button>
        <button type="button" class="btn btn-warning mx-2">Middle</button>
        <button type="button" class="btn btn-success mx-2">Right</button>
      </div>
    </div>
  </body>
</html>

Output

Outline Style

In the outline button group style, we can have buttons with only outlines and no color.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are buttons with outline styles:</p>
      <div class="btn-group">
        <button
          type="button"
          class="btn btn-outline-secondary mx-2"
          data-mdb-color="dark"
        >
          Left
        </button>

        <button
          type="button"
          class="btn btn-outline-secondary mx-2"
          data-mdb-color="dark"
        >
          Middle
        </button>

        <button
          type="button"
          class="btn btn-outline-secondary mx-2"
          data-mdb-color="dark"
        >
          Right
        </button>
      </div>
    </div>
  </body>
</html>

Output

Checkbox Button Group

The checkbox button group allows users to select multiple buttons and toggle.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are different checkbox buttons:</p>
      <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
        >

        <input
          type="checkbox"
          class="btn-check"
          id="btncheck3"
          autocomplete="off"
        />
        <label class="btn btn-outline-primary" for="btncheck3"
          >Checkbox 3</label
        >
      </div>
    </div>
  </body>
</html>

Output

Radio Button

The radio box button group allows users to select only one button and toggle.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are different types of radio buttons:</p>
      <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>

        <input
          type="radio"
          class="btn-check"
          name="btnradio"
          id="btnradio3"
          autocomplete="off"
        />
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
      </div>
    </div>
  </body>
</html>

Output

Button Toolbar

We will add the .btn-toolbar style as we discussed in the above table.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an example of button toolbar:</p>
      <div style="display: flex; justify-content: center">
        <div
          class="btn-toolbar"
          role="toolbar"
          aria-label="Toolbar with button groups"
        >
          <div class="btn-group mx-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
          </div>
          <div class="btn-group mx-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-primary">5</button>
            <button type="button" class="btn btn-primary">6</button>
            <button type="button" class="btn btn-primary">7</button>
          </div>

          <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-primary">8</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output

Button toolbars are complex components in which we use utility classes to space out groups and buttons, and we can also mix input groups with button groups.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an input group example:</p>
      <div style="display: flex; justify-content: center">
        <div class="btn-group me-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-primary">1</button>
          <button type="button" class="btn btn-primary">2</button>
          <button type="button" class="btn btn-primary">3</button>
          <button type="button" class="btn btn-primary">4</button>
        </div>

        <div class="input-group">
          <div class="input-group-text" id="btnGroupAddon">@</div>
          <input
            type="text"
            class="form-control"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </div>
      </div>
    </div>
  </body>
</html>

Output

Properties

Sizing

.btn-group-* (.btn-group-lg|sm|xs) class is used for defining different sizing of the button groups to each .btn-group rather than applying button sizing classes to each individual button in a group.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are different sizes of buttons:</p>
      <!-- Large -->
      <div
        class="btn-group btn-group-lg"
        role="group"
        aria-label="Basic example"
      >
        <button type="button" class="btn btn-success">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-danger">Right</button>
      </div>

      <!-- Standard -->
      <div class="btn-group mx-3" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-success">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-danger">Right</button>
      </div>

      <!-- Small -->
      <div
        class="btn-group btn-group-sm"
        role="group"
        aria-label="Basic example"
      >
        <button type="button" class="btn btn-success">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-danger">Right</button>
      </div>
    </div>
  </body>
</html>

Output

Colors

We can have different colors for button groups.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following are different colors of buttons:</p>
      <div class="btn-group shadow-0" role="group">
        <button type="button" class="btn btn-light" data-mdb-color="dark">
          Left
        </button>
        <button type="button" class="btn btn-light" data-mdb-color="dark">
          Middle
        </button>
        <button type="button" class="btn btn-light" data-mdb-color="dark">
          Right
        </button>
      </div>

      <div class="btn-group shadow-0 mx-3 my-3" role="group">
        <button type="button" class="btn btn-link" data-mdb-color="dark">
          Left
        </button>
        <button type="button" class="btn btn-link" data-mdb-color="dark">
          Middle
        </button>
        <button type="button" class="btn btn-link" data-mdb-color="dark">
          Right
        </button>
      </div>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
      </div>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-success">Left</button>
        <button type="button" class="btn btn-success">Middle</button>
        <button type="button" class="btn btn-success">Right</button>
      </div>

      <div class="btn-group mx-3 my-3" role="group">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-danger">Middle</button>
        <button type="button" class="btn btn-danger">Right</button>
      </div>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-warning">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-warning">Right</button>
      </div>

      <div class="btn-group mx-3" role="group">
        <button type="button" class="btn btn-info">Left</button>
        <button type="button" class="btn btn-info">Middle</button>
        <button type="button" class="btn btn-info">Right</button>
      </div>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-dark">Left</button>
        <button type="button" class="btn btn-dark">Middle</button>
        <button type="button" class="btn btn-dark">Right</button>
      </div>
    </div>
  </body>
</html>

Output

Nesting

We place .btn-group into another .btn-group when we want dropdown menus mixed with a series of buttons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an example of nesting:</p>
      <button type="button" class="btn btn-primary">1</button>
      <button type="button" class="btn btn-primary">2</button>

      <div class="btn-group" role="group">
        <button
          id="btnGroupDrop1"
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
          <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Output

Vertical variations

And as we mentioned above, for making a set of buttons appear vertically stacked, we use the .btn-group-vertical class for it. And it doesn't support split button dropdowns.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an example of vertical nesting:</p>
      <div
        class="btn-group-vertical"
        role="group"
        aria-label="Vertical button group"
      >
        <button type="button" class="btn btn-primary">Button 1</button>
        <button type="button" class="btn btn-primary my-2">Button 2</button>
        <button type="button" class="btn btn-primary">Button 3</button>
        <button type="button" class="btn btn-primary my-2">Button 4</button>
      </div>
    </div>
  </body>
</html>

Output

Vertical Nested

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an example of vertical nesting:</p>
      <div
        class="btn-group-vertical"
        role="group"
        aria-label="Vertical button group"
      >
        <button type="button" class="btn btn-primary">Button</button>
        <div class="btn-group my-2" role="group">
          <button
            id="btnGroupDrop1"
            type="button"
            class="btn btn-primary dropdown-toggle"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </button>
          <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          </ul>
        </div>
        <button type="button" class="btn btn-primary">Button</button>
        <div class="btn-group my-2" role="group">
          <button
            id="btnGroupDrop1"
            type="button"
            class="btn btn-primary dropdown-toggle"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </button>
          <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          </ul>
        </div>
        <div class="btn-group" role="group">
          <button
            id="btnGroupDrop1"
            type="button"
            class="btn btn-primary dropdown-toggle"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </button>
          <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Output

Justified Button

The entire width of the screen is spanned by using the .btn-group-justified class.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
  </head>
  <body>
    <h2 align="center">Ninjas Playground</h2>
    <div align="center" class="container my-5">
      <p class="my-3">Following is an example of justified button:</p>
      <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Apple</a>
        <a href="#" class="btn btn-primary">Samsung</a>
        <a href="#" class="btn btn-primary">Sony</a>
      </div>
    </div>
  </body>
</html>

Output

Frequently Asked Questions

What is Bootstrap?

Bootstrap is a free front-end framework with various predefined CSS codes. It offers packages for popular user interface elements, like forms, buttons, navigation, dropdowns, and many more based on HTML and CSS.

What is the Bootstrap Button Group?

A Bootstrap button group is a series of buttons on a single line/navbar that can be stacked in a vertical column.

What are the different types of bootstrap buttons?

Different types of bootstrap buttons include - bottom level button, Active buttons, Disabled buttons, radio buttons, etc.

Can we use split buttons with vertically stacked button groups?

No, we cannot use split buttons with vertically stacked button groups.

What classes are being used for changing the color of buttons?

The classes used are - .btn-primary , .btn-danger , ..btn-secondary, .btn-info, .btn-light, .btn-success etc.

Conclusion

In this blog, we enlisted the Bootstrap dropdowns, their different buttons, their stylizing with different colors and sizes, and the state of dropdown items.

Here are a few related articles you can refer to:

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Also, enroll in our courses and refer to the mock test and problems available. Have a look at the interview experiences and interview bundle for placement preparations.

Keep Coding.