Bootstrap Button Groups, Full details of Bootstrap Button Groups

Bootstrap Tutorial

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

Bootstrap Tutorial