Pindipin Blog

Memanfaatkan Bootstrap Button

Dasar-dasar Button

Untuk membuat button dasar, Anda cukup menambahkan kelas .btn ke elemen <button> atau <a>. Berikut contohnya:

<button type="button" class="btn btn-primary">Primary Button</button>
<a href="#" class="btn btn-secondary">Secondary Button</a>

Variasi Warna Button

Bootstrap menyediakan beberapa variasi warna yang dapat digunakan untuk button:

• .btn-primary
• .btn-secondary
• .btn-success
• .btn-danger
• .btn-warning
• .btn-info
• .btn-light
• .btn-dark

contoh penggunaan

<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>

Ukuran Button

Anda juga bisa mengatur ukuran button dengan menambahkan kelas .btn-lg untuk ukuran besar atau .btn-sm untuk ukuran kecil:

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

Button Blok

Untuk membuat button yang memenuhi lebar kontainer, gunakan kelas .btn-block:

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

Button yang Dinonaktifkan

Anda dapat menonaktifkan button dengan menambahkan atribut disabled pada elemen <button> atau dengan menambahkan kelas .disabled pada elemen <a>:

<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-secondary disabled">Disabled Link</a>

Button Grup

Jika Anda ingin membuat grup button, Anda bisa menggunakan elemen <div> dengan kelas .btn-group:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Kesimpulan

Dengan Bootstrap, Anda memiliki fleksibilitas untuk membuat berbagai jenis button yang sesuai dengan desain dan kebutuhan situs web Anda. Manfaatkan variasi warna, ukuran, dan fitur lain yang disediakan untuk membuat antarmuka pengguna yang menarik dan responsif.