Bintang Bootstrap 5

Bendera

Bendera (Badges) digunakan untuk menambah maklumat tambahan kepada kandungan:

di <span> digunakan dalam elemen .badge Kelas dan kelas konteks (seperti “) Untuk membuat bendera persegi. Perhatikan

Contoh

<h1>Contoh tajuk <span class="badge bg-secondary">Baru</span></h1>
<h2>Contoh tajuk <span class="badge bg-secondary">Baru</span></h2>
<h3>Contoh tajuk <span class="badge bg-secondary">Baru</span></h3>
<h4>Contoh tajuk <span class="badge bg-secondary">Baru</span></h4>
<h5>Contoh tajuk <span class="badge bg-secondary">Baru</span></h5>
<h6>Contoh tajuk <span class="badge bg-secondary">Baru</span></h6>

Coba Sendiri

Bendera konteks

Guna kelas konteks sebarang (.bg-*) Untuk mengubah warna bendera:

Contoh

<span class="badge bg-primary">Utama</span>
<span class="badge bg-secondary">Kedua</span>
<span class="badge bg-success">Kemaskini</span>
<span class="badge bg-danger">Bahaya</span>
<span class="badge bg-warning">Pemberitahuan</span>
<span class="badge bg-info">Informasi</span>
<span class="badge bg-light">Pucat</span>
<span class="badge bg-dark">Kemerah-merahan</span>

Coba Sendiri

Cincin kapsul

Penggunaan .rounded-pill Kelas membuat cincin lebih bulat:

Contoh

<span class="badge rounded-pill bg-primary">Utama</span>
<span class="badge rounded-pill bg-secondary">Secara Kedua</span>
<span class="badge rounded-pill bg-success">Berhasil</span>
<span class="badge rounded-pill bg-danger">Bahaya</span>
<span class="badge rounded-pill bg-warning">Pemberitahuan</span>
<span class="badge rounded-pill bg-info">Informasi</span>
<span class="badge rounded-pill bg-light">Pucat</span>
<span class="badge rounded-pill bg-dark">Kemerah-merahan</span>

Coba Sendiri

Cincin di dalam elemen

Contoh penggunaan cincin di dalam tombol:

Contoh

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

Coba Sendiri