Bootstrap Button Groups

In the last article we saw how buttons are styled with bootstrap. This article explains the process of grouping buttons. Grouped buttons appear next to each other in a vertical or horizontal line in the form of a group. To create a button group, simply add “btn-group” class to the opening tag of a div. All the buttons within that div will appear grouped together. Take a look at the following example to understand bootstrap button groups.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="btn-group">
        <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
       </div>

    </body>

</html>

Download the code
Try the code

If you open the above webpage in browser, you will see four success button grouped together on a horizontal line. You can see that there are no margins between the button as is the case with buttons that are not grouped.

Vertical Bootstrap Button Groups

You can also create vertically grouped buttons using “btn-group-vertical” class. Simply add this class to the opening tag of the div which contains buttons that you want to group. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="btn-group-vertical">
        <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
         <button type="button" class="btn btn-success">Button Success</button>
       </div>

    </body>

</html>

Download the code
Try the code

Now if you open the above page in browser, you should see buttons stacked together in a vertical group.

Justified Groups

Till now we have seen button groups which were left aligned. However, we can create button groups which take whole width of the parent element and each button shares equal width within the group. Create an outer div with two classes “btn-group” and “btn-group-vertical”. Inside this div, create buttons which you want to include in the group. However, each button should be enclosed within an individual div with class “btn-group”. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-success">Button Success</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-success">Button Success</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-success">Button Success</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-success">Button Success</button>
            </div>
         
       </div>

    </body>

</html>

Download the code
Try the code

Run the above webpage in the browser, you will see four buttons with equal width and height spanning through the whole width of the screen.

Drop Down Menus and Nested Buttons

You can also create nested buttons and drop down menus using bootstrap button groups. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <div class="btn-group">
          <button type="button" class="btn btn-info">Home</button>
          <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            About <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Our services</a></li>
              <li><a href="#">Our Team</a></li>
            </ul>
          </div>
        <button type="button" class="btn btn-info">Features </button>
        </div>
    </body>

</html>

Download the code
Try the code

Open the above page in the browser and click the About button. You should see a drop down menu appear underneath it.

<<< Bootstrap ButtonsBootstrap Glyphicons And Wells >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .