
Badge berfungsi untuk menambahkan informasi tambahan ke dalam konten. Pada Bootstrap 4, untuk membuat Badge kita dapat menggunakan class .badge bersamaan dengan class kontextual seperti .badge-secondary pada elemen <span>. Perlu diingat bahwa ukuran Badge akan sama dengan elemen Parent. Contoh:

<h1>Contoh Heading <span class="badge badge-secondary">Baru</span></h1>
<h2>Contoh Heading <span class="badge badge-secondary">Baru</span></h2>
<h3>Contoh Heading <span class="badge badge-secondary">Baru</span></h3>
<h4>Contoh Heading <span class="badge badge-secondary">Baru</span></h4>
<h5>Contoh Heading <span class="badge badge-secondary">Baru</span></h5>
<h6>Contoh Heading <span class="badge badge-secondary">Baru</span></h6>
Badge Contextual di Bootstrap 4
Kita juga dapat menggunakan class kontekstual seperti .badge-# untuk mengubah warna dari Badge. Contoh:
<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-light">Light</span>
<span class="badge badge-dark">Dark</span>
Badge Pill (Rounded Corner) di Bootstrap 4
Selain itu, kita juga dapat menggunakan class .badge-pill untuk membuat Badge menjadi Rounded Corner. Contoh:
<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-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Memasukkan Badge kedalam Elemen HTML
Berikut adalah contoh untuk membuat Badge di dalam Elemen tombol:
<button type="button" class="btn btn-primary">
Pesan <span class="badge badge-light">4</span>
</button>
Wahh mau pake badgenya, tapi perbaharui link bootstrapnya malah jadi error template blognya :(
BalasHapusError apanya tuh mas...
HapusPosting Komentar