Bootstrap 4 Lencana
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Lencana digunakan untuk menambahkan informasi tambahan ke konten apa pun. Gunakan .badgekelas bersama dengan kelas kontekstual (seperti .badge-secondary) di dalam <span>
elemen untuk membuat lencana persegi panjang. Perhatikan bahwa skala lencana agar sesuai dengan ukuran elemen induk (jika ada):
Contoh
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Lencana Kontekstual
Utama
Sekunder
Kesuksesan
Bahaya
Peringatan
info
Lampu
Gelap
Gunakan salah satu kelas kontekstual ( .badge-*) untuk mengubah warna lencana:
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>
Lencana pil
Utama
Sekunder
Kesuksesan
Bahaya
Peringatan
info
Lampu
Gelap
Gunakan .badge-pillkelas untuk membuat lencana lebih bulat:
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>
Lencana di dalam Elemen
Contoh penggunaan lencana di dalam tombol:
Contoh
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>