Membuat Badge di Bootstrap 4

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:

Badge

<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>

Lihat kode di Github | Lihat Live Demo


Badge Contextual di Bootstrap 4

Kita juga dapat menggunakan class kontekstual seperti .badge-# untuk mengubah warna dari Badge. Contoh:

 Badge Contextual di Bootstrap 4

<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>

Lihat kode di Github | Lihat Live Demo

Badge Pill (Rounded Corner) di Bootstrap 4

Selain itu, kita juga dapat menggunakan class .badge-pill untuk membuat Badge menjadi Rounded Corner. Contoh:

Badge Pill (Rounded Corner) di Bootstrap 4

<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>

Lihat kode di Github | Lihat Live Demo

Memasukkan Badge kedalam Elemen HTML

Berikut adalah contoh untuk membuat Badge di dalam Elemen tombol:

Memasukkan Badge kedalam Elemen HTML

<button type="button" class="btn btn-primary">
  Pesan <span class="badge badge-light">4</span>
</button>

Lihat kode di Github | Lihat Live Demo

2 Komentar

  1. Wahh mau pake badgenya, tapi perbaharui link bootstrapnya malah jadi error template blognya :(

    BalasHapus

Posting Komentar