How to Bootstrap- Responsive Button Groups

Button groups are multiple buttons stacked together on a single line. This is useful when you make button menu. In this guide, we will learn responsive button groups or menu item in the Bootstrap front-end framework.

 

Bootstrap Button Group

To create button groups, wrap a group of buttons in a <div> tag with the class .btn-group .  Let’s look an example to demonstrate button groups.

Bootstrap Example
    <!--Bootstrap Button Group with 3 inline buttons-->
    <div class="btn-group">
         <button type="button" class="btn btn-primary">Button 1</button>
         <button type="button" class="btn btn-primary">Button 2</button>
         <button type="button" class="btn btn-primary">Button 3</button>
    </div>

 

Result

 

You can also create button groups appear vertically stacked. To vertical button group,  use .btn-group-vertical class instead of the class .btn-group.

Bootstrap Example
    <!--Bootstrap Vertically stacked Button Group with 3 inline buttons-->
    <div class="btn-group-vertical">
         <button type="button" class="btn btn-primary">Button 1</button>
         <button type="button" class="btn btn-primary">Button 2</button>
         <button type="button" class="btn btn-primary">Button 3</button>
    </div>

 

Result

 

Bootstrap Button Toolbar

Bootstrap allow you to combine different button groups together.i.e. Button toolbar. To create Bootstrap button toolbar, wrap button groups in a <div> tag and with the class .btn-toolbar. Let’s look at the example.

Bootstrap Example
   <!--Bootstrap Button toolbar Example-->
   <div class = "btn-toolbar">
   
      <div class = "btn-group">
         <button type = "button" class = "btn btn-primary">Button 1</button>
         <button type = "button" class = "btn btn-primary">Button 2</button>
         <button type = "button" class = "btn btn-primary">Button 3</button>
      </div>
   
      <div class = "btn-group">
         <button type = "button" class = "btn btn-primary">Button 4</button>
         <button type = "button" class = "btn btn-primary">Button 5</button>
      </div>
   
      <div class = "btn-group">
         <button type = "button" class = "btn btn-primary">Button 6</button>
         <button type = "button" class = "btn btn-primary">Button 7</button>
      </div>
   
   </div>

 

Result

 

Button Group Size

You can scale the button group with the classes .btn-group-lg, .btn-group-sm or .btn-group-xs  to create larger or smaller button groups. You can add these classes with the .btn-group.

Bootstrap Example
    <!-- Bootstrap button group with large size -->
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
            <button type="button" class="btn btn-primary">Button 3</button>
        </div>
    </div>

    <!-- Bootstrap button group with normal size  -->
    <div class="btn-toolbar">
        <div class="btn-group">
           <button type="button" class="btn btn-primary">Button 1</button>
           <button type="button" class="btn btn-primary">Button 2</button>
           <button type="button" class="btn btn-primary">Right</button>
        </div>
    </div>

    
    <!-- Bootstrap button group with small size -->
    <div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
            <button type="button" class="btn btn-primary">Button 3</button>
        </div>
    </div>

   
    <!-- Bootstrap button group with extra small size -->
    <div class="btn-toolbar">
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
            <button type="button" class="btn btn-primary">Button 3</button>
        </div>
    </div>

 

Result

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...