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
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>
|