Button Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Basic example

  
         <div class="btn-group mb-4" role="group" aria-label="Basic example">
         <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>

Button toolbar

  
         <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group me-2 mb-4" 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 me-2 mb-4" role="group" aria-label="Second group">
             <button type="button" class="btn btn-secondary">5</button>
             <button type="button" class="btn btn-secondary">6</button>
             <button type="button" class="btn btn-secondary">7</button>
             </div>
             <div class="btn-group mb-4" role="group" aria-label="Third group">
             <button type="button" class="btn btn-info">8</button>
             </div>
         </div>

Nesting

         <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
         <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-haspopup="true" aria-expanded="false">
         Dropdown
         </button>
         <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="btnGroupDrop1">
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a>  
        
         </div>
         </div>
         </div>

Vertical small

         <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         </div>

Vertical large

         <div class="btn-group-vertical">
         <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown
         </button>
         <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another Action</a>
         <a class="dropdown-item" href="#">Something else here</a>
      
         </div>
         </div>
         <button type="button" class="btn btn-primary">Button</button>
         <button type="button" class="btn btn-primary">Button</button>
         <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown
         </button>
         <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another Action</a>
         <a class="dropdown-item" href="#">Something else here</a>
         </div>
         </div>
         </div>
         </div>