Cara Membuat/Menggunakan Bootstrap Badges dan Labels dengan Mudah

Mungkin badges dan labels tersebut sudah bukan kata asing untuk kalian, namun diantara kalian mungkin ada yang belum mengetahui tentang hal ini. Apa itu badges dan labels ? Budges merupakan tanda atau tempat untuk mengidentifikasi jumlah pada suatu link atau sejenisnya, misal kita memiliki elemen <form> untuk komentar dan menampilkan jumlah komentar, agar lebih mudah lihat contoh dibawah ini.

Komentar 6

kode syntaxnya.

<a href="#">Komentar <span class="badge">6</span></a>

selain menggunakan elemen <a> badges dapat digunakan dengan menggunakan elemen <button>, jadi elemen <span> berada didalam elemen <button>, contoh

kode syntaxnya

<button class="btn btn-default" type="button">komentar <span class="badge">6</span></button>
<button class="btn btn-primary" type="button">komentar <span class="badge">6</span></button>
<button class="btn btn-success" type="button">komentar <span class="badge">6</span></button>
<button class="btn btn-info" type="button">komentar <span class="badge">6</span></button>
<button class="btn btn-warning" type="button">komentar <span class="badge">6</span></button>
<button class="btn btn-danger" type="button">komentar <span class="badge">6</span></button>

Sedangkan Labels merupakan tanda untuk memberikan sesuatu informasi mengenai hal-hal baru ataupun layanan baru atau hal lain, sebagai contoh.

Layanan YokJek Baru

kode syntaxnya.

<h3>Layanan YokJek <span class="label label-default">Baru</span></h3>

Jadi diantara keduanya hampir sama dan memiliki fungsi dan pemakaian yang berbeda tetapi hampir sama :). keduanya menggunakan elemen <span>. Bootstrap menyediakan dengan tuju warna yang dapat digunakan sesuai dengan kebutuhan. Berikut ini merupakan contoh variasi tersebut.