Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 22 : Cara Membuat Pagination di Bootstrap, selanjutnya kita akan belajar cara membuat badge di Bootstrap.
Badge umumnya digunakan untuk menunjukkan beberapa informasi berharga di halaman web seperti judul penting, pesan peringatan, penghitung pemberitahuan, dll.
Contoh berikut akan menunjukkan cara membuat badge menggunakan Bootstrap.
<h1>Bootstrap heading <span class="badge badge-secondary">Baru</span></h1>
<h2>Bootstrap heading <span class="badge badge-secondary">Baru</span></h2>
<h3>Bootstrap heading <span class="badge badge-secondary">Baru</span></h3>
<h4>Bootstrap heading <span class="badge badge-secondary">Baru</span></h4>
<h5>Bootstrap heading <span class="badge badge-secondary">Baru</span></h5>
<h6>Bootstrap heading <span class="badge badge-secondary">Baru</span></h6>
Class Kontekstual untuk Badge
Ada beberapa class kontekstual atau pengubah untuk mengubah tampilan badge.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-light">Light</span>
Membuat Badge Pil
Anda dapat membuat badge bentuk pil (yaitu badge dengan sudut lebih membulat) menggunakan class modifier .badge-pill, seperti yang ditunjukkan pada contoh berikut:
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-dark">Dark</span> <span class="badge badge-pill badge-light">Light</span>
Menampilkan Penghitung dengan Badge
Anda juga dapat menggunakan badge sebagai bagian dari tautan atau tombol untuk memberikan penghitung, seperti jumlah pesan yang diterima atau belum dibaca, jumlah pemberitahuan, dll.
Model ini paling sering ditemukan di email, dasbor aplikasi, web jejaring sosial, dll. Berikut ini sebuah contoh:
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link">Beranda</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profil</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">Pesan <span class="badge badge-light">24</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Notifikasi <span class="badge badge-primary">5</span></a>
</li>
</ul>
Semoga tutorial ini membantu Anda untuk belajar bagaimana cara membuat badge di Bootstrap.
