Bootstrap 7 tane buton sitili sunar. Bu sitilleri elde etmek için kullanılan class lar aşağıdaki tabloda görülmektedir.

Button classları kullanılırken ilk olarak temel .btn classı kullanılmalıdır.

Şekil *.1: Bootstrap button classlarının kullanımı

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Button classları <a>, <button> ve <input type=”submit” ..> , <input type=”button” …..> kontrollerinde Şekil *.2’te belirtildiği gibi kullanılabilir.

Şekil *.2: Button classlarının belirtilen kontrollerde kullanımı

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Button Boyutları

Bootstrap 4 farklı button boyutu sunar. Bunlar Large, Medium, Small ve Xsmall ‘dur.

Tablo *.2’de bu boyutlandırmalar için kullanılacak classlar yer almaktadır. Şekil *.4’te button boyutlandırma classlarının kullanımı görülmektedir.

Şekil *.3: Button boyutlandırma classlarının kullanımı

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons

İçinde bulunduğu elementin genişliğe kadar genişliğe sahip ve bulunduğu satırı kaplayan blok seviye butonlar oluşturmak için .btn-block classı kullanılır. İstenirse .btn-block classı ile birlikte buton boyutlandırma classları da kullanılabilir.

Şekil *.4: .btn-block classının butonlarda kullanımı

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Şekil *.5: .btn-block classının kullanımı ile ortaya çıkan sonuç

Active/Disabled Buttons

Bootstrap ile buttonları aktif (yani tıklanmış görünümlü) veya disabled(tıklanamayan) buttonlar haline getirmek mümkündür. Aşağıdaki şekillerde bu işlemler için .active ve .disabled classlarının nasıl kullanıldığı gösterilmiştir.

Şekil *.6: .active ve .disabled classlarının kullanımı

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Şekil *.7: .active ve .disabled classlarının kullanımı ile ortaya çıkan sonuç