June 13, 2015

Bootstrap Button Groups

Bootstrap Button Groups : You can create a group of buttons (ie. in single line) in bootstrap.

.btn-group is used to create button group in bootstrap.

Basic Example of Bootstrap Button Groups is :

Bootstrap Button Group : Example

<div class="container">
 <div class="btn-group">
  <button type="button" class="btn btn-default">Button One</button>
  <button type="button" class="btn btn-primary">Button Two</button>
  <button type="button" class="btn btn-default">Button Three</button>
</div>
</div>

Bootstrap Button Groups : Justified

.btn-group-justified class is used to create justified bootstrap button group.

Bootstrap Button Groups : Justified Example

<div class="container">
 <div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-default">Button One</a>
  <a href="#" class="btn btn-primary">Button Two</a>
  <a href="#" class="btn btn-default">Button Three</a>
</div>
</div>

Bootstrap Button Groups : Vertical

.btn-group-vertical class is used to create vertical bootstrap button groups.

Bootstrap Button Group : Vertical Example

<div class="container">
 <div class="btn-group btn-group-vertical">
  <button type="button" class="btn btn-default">Button One</button>
  <button type="button" class="btn btn-primary">Button Two</button>
  <button type="button" class="btn btn-default">Button Three</button>
</div>
</div>

Bootstrap Button Groups : Nested

bootstrapbtn-grousp

Simple example of nested bootstrap button group is as :

Bootstrap Button Group : Nested Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Button One</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" 
      data-toggle="dropdown">
      Dropdown Button 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown Button One</a></li>
      <li><a href="#">Dropdown Button Two</a></li>
    </ul>
  </div>
</div>

Advertisements

Add Comment

📖 Read More

bootstrap tutorial for beginners, bootstrap tutorials