Bootstrap Button Groups

Boostrap 4 ile oluşturduğumuz butonları .btn-group sınıfını kullanarak gruplayabiliriz.

Boostrap buton grubu oluşturmak için <div class="btn-group"> etiketini kullanabiliriz.

<div class="btn-group">
  <button type="button" class="btn btn-primary">First</button>
  <button type="button" class="btn btn-primary">Second</button>
  <button type="button" class="btn btn-primary">Third</button>
</div>

Örnek 1 için tıklayınız.

Buton grupları oluşturduğumuzda buton boyutları için kullandığımız .btn-sm ve .btn-lg sınıflarını her bir butona tek tek vermektense gruba verip bütün butonların boyutlarını aynı yapabiliriz.

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">First</button>
  <button type="button" class="btn btn-primary">Second</button>
  <button type="button" class="btn btn-primary">Third</button>
</div>

Örnek 2 için tıklayınız.

Butonları alt alta gruplayıp dikey bir menü görüntüsü oluşturmak için .btn-group yerine .btn-group-vertical sınıfını kullanmalıyız.

<div class="btn-group btn-group-vertical">
  <button type="button" class="btn btn-primary">First</button>
  <button type="button" class="btn btn-primary">Second</button>
  <button type="button" class="btn btn-primary">Third</button>
</div>

Örnek 3 için tıklayınız.

Buton grubu içindeki her hangi bir buton için bir dropdown menü oluşturabiliriz.

<div class="btn-group">
  <button type="button" class="btn btn-primary">First</button>
  <button type="button" class="btn btn-primary">Second</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Third
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Fifth</a>
      <a class="dropdown-item" href="#">Six</a>
    </div>
 </div>

Örnek 4 için tıklayınız.