1) Bootstrap Button Groups

Together in a single line define a Button Groups use the .btn-group class with <div> elements.

Example:-

 <div class="btn-group">
  <button type="button" class="btn btn-primary">HTML</button>
  <button type="button" class="btn btn-primary">CSS</button>
  <button type="button" class="btn btn-primary">Bootstrap</button>
</div>
 

Test it Now

2) Bootstrap Button Size

Use the class .btn-group-lg for Large size button and Use the class.btn-group-sm for small size button.

Example:-

 <div class="btn-group">
 <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">HTML</button>
    <button type="button" class="btn btn-primary">CSS</button>
    <button type="button" class="btn btn-primary">Bootstrap</button>
 </div>   
   </div>
 

Test it Now

3) Bootstrap Vertical Button Groups

Use the .btn-group-vertical for vertical button groups:

Example:-

 <div class="btn-group">
  <div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">HTML</button>
   <button type="button" class="btn btn-primary">CSS</button>
   <button type="button" class="btn btn-primary">Bootstrap</button>
 </div>
 

Test it Now

4) Bootstrap Dropdown Menus Button Groups

Example:-

 <div class="btn-group">
  <button type="button" class="btn btn-primary">HTML</button>
  <button type="button" class="btn btn-primary">CSS</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Java
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Servlet</a>
      <a class="dropdown-item" href="#">JSP</a>
    </div>
  </div>
</div>
 

Test it Now

Next TopicBootstrap Glyphicons

← prev next →

Bootstrap 4 Tuto

1) Bootstrap Button Groups

2) Bootstrap Button Size

3) Bootstrap Vertical Button Groups

4) Bootstrap Dropdown Menus Button Groups