btn-group sınıfı ile butonlar gruplanıp bir araya getirilir.
Örnek:
<div class="btn-group">
<button type="button" class="btn btn-success">Anasayfa</button>
<button type="button" class="btn btn-info">Makaleler</button>
<button type="button" class="btn btn-default">Soru-Cevap</button>
<button type="button" class="btn btn-danger">Yazarlar</button>
<button type="button" class="btn btn-warning">Hakkımızda</button>
</div>
Daha karmaşık gruplamalar için btn-group sınıflarını btn-toolbar sınıfı içerisine almamız gerekir.
Örnek:
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
btn-group'lar için kullanabileceğimiz boyutlandırmalar: btn-group-lg, btn-group-sm, btn-group-xs
Örnek:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success">HTML</button>
<button type="button" class="btn btn-info">CSS</button>
<button type="button" class="btn btn-default">Java</button>
<button type="button" class="btn btn-danger">C#</button>
<button type="button" class="btn btn-warning">SQL</button>
</div>
btn-group'lar için kullanabileceğimiz hizalamalar: pull-left, pull-right, btn-group-justified
pull-left ve pull-right isminden kolayca anlaşılıyor. Biri sola, diğeri sağa hizalamayı sağlar.
btn-group-justified ise kaç tane buton konulduysa 12 grid'e eşit yayılacak şekilde butonların genişliklerini ayarlar.
Örnek:
<div class="btn-group pull-left">
<a class="btn btn-success" role="button">Semih</a>
<a class="btn btn-info" role="button">Ferik</a>
<a class="btn btn-warning" role="button">Fatma Nur</a>
</div>
<div class="btn-group pull-right">
<a class="btn btn-danger" role="button">Aaaa</a>
<a class="btn btn-default" role="button">Bbbb</a>
<a class="btn btn-primary" role="button">Cccc</a>
</div>
<div class="btn-group btn-group-justified">
<a class="btn btn-warning">sadasd</a>
<a class="btn btn-danger">sdadasssssss</a>
<a class="btn btn-success">nanan</a>
</div>
Buton ve Açılır Menü Bir Arada Kullanım
<div class="btn-group">
<button type="button" class="btn btn-success">Makale</button>
<button type="button" class="btn btn-danger">Yazar</button>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Açılır Menü <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Yazarlar</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
</div>
</div>