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