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>
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>
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>
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!
Leave a Reply