Bootstrap Button Groups
Button groups allow multiple buttons to be stacked together on a single line.  Different types of individual buttons and modify them with predefined classes.  
Button Groups
.btn-group : This class is used for a basic button group. <div> element with class (.btn-group).
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Button Groups</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <div class="btn-group">
      <button type="button" class="btn btn-default">Button 1</button>
      <button type="button" class="btn btn-default">Button 2</button>
      <button type="button" class="btn btn-default">Button 3</button>
    </div>
    <br /><br />
    <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>
    
</form>
 
</body>
</html>
Output :


Button Toolbars and Sizes
.btn-toolbar : This helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Button Toolbars and Sizes</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <h3>Button Toolbars</h3>
    <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
    </div>
    <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
    </div>
    <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
    </div>
    
    <br /><br /><br />
    
    <h3>Button Sizes</h3>
    <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 class = "btn-group btn-group">
       <button type = "button" class ="btn btn-success">Button 4</button>
       <button type = "button" class ="btn btn-success">Button 5</button>
       <button type = "button" class ="btn btn-success">Button 6</button>
    </div>
     <div class = "btn-group btn-group-sm">
       <button type = "button" class ="btn btn-info">Button 7</button>
       <button type = "button" class ="btn btn-info">Button 8</button>
    </div>
    <div class = "btn-group btn-group-xs">
       <button type = "button" class = "btn btn-warning">Button 9</button>
    </div>
    
    
</form>
 
</body>
</html>
Output :

Button Toolbars




Button Sizes

Vertical Button Groups
.btn-group-vertical : This class make a set of buttons appear vertically stacked rather than horizontally.
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Vertical Button Groups</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-default">One</button>
      <button type="button" class="btn btn-primary">Two</button>
      <button type="button" class="btn btn-info">Three</button>
      <button type="button" class="btn btn-success">Four</button>
      <button type="button" class="btn btn-warning">Five</button>
      <button type="button" class="btn btn-danger">Six</button>
    </div>
 
</form>
 
</body>
</html>
Output :
Justified Button Groups
.btn-group-justified : To span the entire width of the screen, use the (.bt .btn-group-justified) class.
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Justified Button Groups</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <div class="btn-group btn-group-justified">
      <a href="#" class="btn btn-info">One</a>
      <a href="#" class="btn btn-info">Two</a>
      <a href="#" class="btn btn-info">Three</a>
      <a href="#" class="btn btn-info">Four</a>
      <a href="#" class="btn btn-info">Five</a>
    </div>
 
</form>
 
</body>
</html>
Output :
Nesting Button Groups and Split Button Dropdowns
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Nesting Button Groups and Split Buttons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
 
<h3>Nesting Button Groups and Dropdowns</h3>  
<div class="btn-group">
  <button type="button" class="btn btn-primary">One</button>
  <button type="button" class="btn btn-primary">Two</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Three <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sample 1</a></li>
      <li><a href="#">Sample 2</a></li>
      <li><a href="#">Sample 3</a></li>
    </ul>
  </div>
</div>
 
<br /><br />
 
<h3>Split Button Dropdowns</h3>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Web Designing</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">Photoshop</a></li>
  </ul>
</div>
 
</form>
 
</body>
</html>
Output :

Nesting Button Groups and Dropdowns



Split Button Dropdowns

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.