Button dan Button Group pada Bootstrap 4

11/09/2017    Maykhel David    33     Website

Hallo semuanya, segala kemudahan dalam dalam bootstrap 3 sudah tersedia secara stabil dalam versi terakhirnya. Banyak sekali class helper dalam bootstrap yang bisa kita gunakan untuk memberikan tema dan segala keperluan dalam desain website. Pada Bootstrap 4 kita juga memiliki banyak sekali tambahan yang ada dibandingkan dengan bootstrap 3. Pada bootstrap 4 kita memiliki tambahan dan perubahan warna pada tombol dan tema elemennya. Contohnya seperti dibawah ini

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

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

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

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Pada bootstrap 4 juga memberikan class tambahan pada tombol dengan membentuk tombol dengan outline seperti dibawah ini

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Selebihnya kita bisa menggunakan beberapa class lain seperti .btn-lg .btn-md .btn-block dan masih banyak class lainnya yang bisa kalian gunakan seperti yang ada pada versi sebelumnya.

Selain tombol diatas, pada bootstrap 4 kita juga bisa menggunakan button group untuk membuat pengelompokkan terhadap beberapa tombol yang telah kita buat. Contohnya seperti ini

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Kita juga bisa menggunakan button group menjadi vertical dengan memberikan class seperti berikut

<div class="btn-group-vertical">
  ...
</div>

Baiklah teman-teman, penggunaan button sangat bervariasi pada bootstrap 4 ini. Ada banyak hal yang bisa kita pelajari untuk mengembangkan website yang kita buat. Demikian artikel yang membahas tentang Penggunaan Button dan Button Group pada Bootstrap 4. Semoga bermanfaat

Tips dan Trik, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More