Membuat Badge dengan Bootstrap

Membuat Badge dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat badge dengan menggunakan Bootstrap

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Badge dengan Bootstrap</title>
</head>
<body>
  <div class="container">
    <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>

      
  </div>
</body>
</html>
HTML
Badge dengan Bootstrap
Primary Secondary Success Danger Warning Info Light Dark

Anda dapat mengganti kelas badge dengan kelas lain yang disediakan oleh Bootstrap untuk mendapatkan tampilan yang berbeda. Misalnya, Anda dapat menggunakan badge-pill untuk membuat badge dengan sudut yang melengkung:

HTML
<span class="badge badge-primary badge-pill">Primary</span>
<span class="badge badge-secondary badge-pill">Secondary</span>
<span class="badge badge-success badge-pill">Success</span>
<span class="badge badge-danger badge-pill">Danger</span>
<span class="badge badge-warning badge-pill">Warning</span>
<span class="badge badge-info badge-pill">Info</span>
<span class="badge badge-light badge-pill">Light</span>
<span class="badge badge-dark badge-pill">Dark</span>
HTML
Badge dengan Bootstrap
Primary Secondary Success Danger Warning Info Light Dark

Anda juga dapat menambahkan angka atau teks di dalam badge dengan menggunakan elemen <sup> atau <sub>:

HTML
<span class="badge badge-primary">Notifikasi <sup>5</sup></span>
<span class="badge badge-secondary">Pesan <sup>10</sup></span>
<span class="badge badge-success">Tugas <sup>3</sup></span>
<span class="badge badge-danger">Error <sup>2</sup></span>
HTML
Badge dengan Bootstrap
Notifikasi 5 Pesan 10 Tugas 3 Error 2

Dengan menggunakan kode di atas, Anda dapat membuat badge dengan berbagai tampilan dan konten sesuai kebutuhan Anda. Selamat mencoba!

Artikel Terbaru ⭐