Bootstrap Buton Grupları

Bootstrap buton grupları birden fazla butonun tek bir özellik altında toplanması halidir. Bootstrap buton grupları:

• Yatay Buton Grupları
• Dikey Buton Gruplar
• Açılır Buton Grupları

olarak 3 farklı şekilde bulunmaktadır.

Yatay Buton Grupları

Yatay düğme grupları temel düğme grupları olarakta geçmektedir.

Yatay Buton Grupları Kodu

<div class="btn-group" role="group" aria-label="Yatay Düğme Grupları">
  <button type="button" class="btn btn-secondary">Sol</button>
  <button type="button" class="btn btn-secondary">Orta</button>
  <button type="button" class="btn btn-secondary">Sağ</button>
</div>

Dikey Buton Grupları

Butonların dikey olarak görünmesini istediğimiz zaman kullanılır.

Dikey Buton Grupları Kodu

<div class="btn-group-vertical">
  <button type="button" class="btn btn-info"> Html </button>
  <button type="button" class="btn btn-info"> Css </button>
  <button type="button" class="btn btn-info"> JavaScript </button>
  <button type="button" class="btn btn-info"> Bootstrap </button>
</div>

Açılır Buton Grupları

Butonların açılır menü halinde olması için kullanılır.

Açılır Buton Grupları Kodu

<div class="btn-group" role="group" aria-label="Açılır Menü">
  <button type="button" class="btn btn-info">Html</button>
  <button type="button" class="btn btn-info">Css</button>

  <div class="btn-group" role="group">
    <button id="butongrup1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Bootstrap
    </button>
    <div class="dropdown-menu" aria-labelledby="butongrup1">
      <a class="dropdown-item" href="#">Bootstrap 3</a>
      <a class="dropdown-item" href="#">Bootstrap 4</a>
    </div>
  </div>
</div>