Sunday, 19 April 2015

Bootstrap Button Groups



Button Groups:
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
<div class="btn-group">
  
<button type="button" class="btn btn-primary">Apple</button>
  
<button type="button" class="btn btn-primary">Samsung</button>
  
<button type="button" class="btn btn-primary">Sony</button>
</div>
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-* to size all buttons in the group:
<div class="btn-group btn-group-lg">
  
<button type="button" class="btn btn-primary">Apple</button>
  
<button type="button" class="btn btn-primary">Samsung</button>
  
<button type="button" class="btn btn-primary">Sony</button>
</div>

 

 

Vertical Button Groups:

Bootstrap also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
<div class="btn-group-vertical">
  
<button type="button" class="btn btn-primary">Apple</button>
  
<button type="button" class="btn btn-primary">Samsung</button>
  
<button type="button" class="btn btn-primary">Sony</button>
</div>

 

Nesting Button Groups & Drop Down Menus:

Nest button groups to create drop down menus:
<div class="btn-group">
  
<button type="button" class="btn btn-primary">Apple</button>
  
<button type="button" class="btn btn-primary">Samsung</button>
  
<div class="btn-group">
    
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony 
<span class="caret"></span></button>
    
<ul class="dropdown-menu" role="menu">
      
<li><a href="#">Tablet</a></li>
      
<li><a href="#">Smartphone</a></li>
    
</ul>
  
</div>
</div>




No comments:

Post a Comment