Bootstrap Button Groups
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap Button Groups
❮ Previous
Next ❯
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:
Example
<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>Try it Yourself »
Tip: Instead of applying button sizes to every button in a
group, use class .btn-group-lg|sm|xs to size all buttons in the group:
Example
<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>Try it Yourself »
Vertical Button Groups
Bootstrap also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
Example
<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>Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified
class:
Example with <a> elements:
Example
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>Try it Yourself »
Note: For <button> elements, you must wrap each button in a .btn-group class:
Example
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>Try it Yourself »
Nesting Button Groups & Dropdown Menus
Nest button groups to create dropdown menus:
Example
<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>Try it Yourself »
Split Button Dropdowns
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>Try it Yourself »
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Exercise 5 »
❮ Previous
Next ❯