How do i group multiple buttons in to group and create nested Button groups

Published September 27, 2021

In the previous example we covered create button in bootstrap, we don't know how to group the multiple buttons into group. In this example we will create grouped button using btn-group class

Let's create simple example to group the buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Group Buttons Example</title>

   </head>

   <body  style="padding:20px;">

<h2>Grouped Buttons</h2>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">HTML</button>
  <button type="button" class="btn btn-warning">CSS</button>
  <button type="button" class="btn btn-danger">Bootstrap</button>
</div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </div></div>

   </body>
</html>



</body>
</html>

Make Links as Group

<h2>Grouped Liks Buttons</h2>
<div class="btn-group">
  <a href="#" class="btn btn-primary " >HTML</a>
  <a href="#" class="btn btn-primary active" aria-current="page">CSS</a>
  <a href="#" class="btn btn-primary">Bootstrap</a>
</div>

How do i create Checkbox grouped buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Group Buttons Example</title>

   </head>

   <body  style="padding:20px;">

<h2>Check Box Buttons</h2>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">HTML</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">CSS</label>

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

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </div></div>

   </body>
</html>



</body>
</html>

Output

How do i create Group Checkbox in bootstrap

Align Buttons as vertical

using the btn-group-vertical class we can arrange the button groups in vertical direction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Group Buttons Example</title>

   </head>

   <body  style="padding:20px;">

<h2>Vertical Button Group</h2>
         <div class = "btn-group-vertical" role = "group">
            <button type = "button" class = "btn btn-info">JAVA</button>
            <button type = "button" class = "btn btn-info">C++</button>
            <button type = "button" class = "btn btn-info">C</button>
            <button type = "button" class = "btn btn-info">PHP</button>
            <button type = "button" class = "btn btn-info">Nodejs</button>
            <button type = "button" class = "btn btn-info">Python</button>
         </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </div></div>

   </body>
</html>



</body>
</html>

Bootstrap5 Nested Button Groups

By place a .btn-group within another .btn-group we can create nested groups

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Group Buttons Example</title>

   </head>

   <body  style="padding:20px;">
<div class = "container">
         <h2>Nesting Button Group</h2>
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-primary">Web Apps</button>
            <button type = "button" class = "btn btn-primary">Desktop Apps</button>

            <div class = "btn-group" role = "group">
               <button id = "btnGroupDrop1" type = "button" class = "btn btn-info
                  dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">

                  Mobile Apps
               </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                          <li><a class="dropdown-item" href="#">Android Apps</a></li>
                          <li><a class="dropdown-item" href="#">ios Apps</a></li>
                          <li><a class="dropdown-item" href="#">Flutter Apps</a></li>
                        </ul>
            </div>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </div></div>

   </body>
</html>



</body>
</html>

Conclusion: In this bootstrap example we covered how to create grouped buttons, align buttons vertically and how to create nested groupd buttons

Article Contributed By :

656 Views

Projects By category