Badges / Labels pada Bootstrap biasanya digunakan untuk menampilkan bubble pada suat tulisan, misalnya menjadi bagian dari notifikasi / pemberitahuan. Pada umumnya, notifikasi akan menampilkan jumlah notifikasi yang di dapatkan dalam bentuk bubble (seperti notifikasi Facebook).
Gambar di atas adalah contoh dari Badges Bootstrap, kamu dapat menyesuaikannya sesuai keperluan. Lalu, apa perbedaan Badges dan Labels Bootstrap ?
Perbedaan Badges & Labels – Bootstrap
Tidak ada perubahan yang signifikan antara keduanya, perbedaannya hanya fungsi yang disediakan. Badges ditujukan untuk menampilkan angka, sedangkan Labels ditujukan untuk menampilkan text (biasanya digunakan untuk menampilkan informasi dari text sebelumnya).
Baca Juga:
Walaupun kamu dapat bebas menggunakan text di Badges dan angka di Labels, tapi lebih disarankan untuk menggunakan sesuai fungsinya saja agar tidak berantakan ketika memasukkan dalam jumlah karakter yang banyak.
- Badges
Seperti yang terlihat pada gambar di atas, itu adalah contoh dari Badges Bootstrap. Berikut ini susunan kode yang diperlukan:
<h2>Badges Bootstrap - Posciety</h2> <a href="#">Pemberitahuan A <span class="badge">7</span></a><br> <a href="#">Pemberitahuan B <span class="badge">3</span></a><br> <a href="#">Pemberitahuan C <span class="badge">9</span></a>
Kodingan di atas menggunakan a href agar dapat di klik untuk menuju suatu halaman yang dimaksud, itu biasanya yang dilakukan para pengembang ketika menampilkan notifikasi. Silahkan sesuaikan dengan keperluan situs web / blog yang kamu buat !
- Labels
Seperti yang dijelaskan di atas, sebaiknya gunakan Labels untuk menampilkan text / informasi dari kata sebelumnya. Contoh:
Berikut ini strukutr kode yang diperlukan untuk menampilkan Labels seperti pada gambar di atas:
<h2>Labels Bootstrap - Posciety</h2> <p>Ini adalah contoh <span class="label label-default">Labels Bootstrap</span></p> <p>Ini adalah contoh <span class="label label-default">Labels</span></p>
Simpan dan lihat hasilnya !
Kamu dapat menyesuaikan ukuran bubbles dari Bootstrap dengan heading, misalnya h1, h2, dst. Jika ingin menyesuaikan warna, gunakan contextual classes untuk text Bootstrap, contoh: label-success, label-default, dll.
Beberapa situs web / blog juga menampilkan bubble ini dengan menggunakan ikon, pastikan kamu memahami bagaimana cara memnampilkan ikon di Bootstrap agar mudah menerapkannya di Badges dan Labels.