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>