Tutorial Belajar Bootstrap 4 Part 11 – Membuat Badges dengan Bootstrap

Selamat datang dalam tutorial warung belajar, setelah dalam tutorial sebelumnya kita telah membahas mengenai cara membuat pesan alert dengan bootstrap, dalam tutorial kali ini kita akan belajar untuk membuat badges dengan bootstrap.

badges digunakan untuk memberikan informasi tambahan pada sebuah konten web, contohnya untuk menampilkan keterangan jumlah notifikasi pesan yang masuk, menampilkan status dari transaksi data dan beberapa informasi lainnya.

untuk membuat badges lebih cenderung menggunakan tag <span>, didalam tag <span> tersebut anda dapat menambahkan class .badge dan disertai dengan contextual class contohnya seperti .badge-primary, untuk menyesuaikan tampilan badge yang diinginkan.

 

 

Cara membuat badge dengan bootstrap

Untuk contoh pembuatan bagde dengan bootstrap, bisa diperhatikan skrip dibawah ini :

Semisal kita simpan dengan nama badge_bootstrap.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

• untuk membuat badge tinggal membuat tag <span> dan kita menambahkan class badge didalamnya, setelah itu tambahkan dengan contextual class, seperti badge-primary, badge-secondary dll.
• warna badge akan menyesuaikan contextual class yang digunakan

 

 

Membuat Pill Badges dengan bootstrap

Pill Badges itu sama seperti badges sebelumnya hanya saja bentuknya lebih melingkar, untuk contoh silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama pill_badges.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut ini :

Keterangan :

• untuk membuat pill badge anda hanya perlu menambahkan class badge-pill di masing masing objek badge

 

 

 

Badge didalam Element Lain

pada bagian ini kita akan membahas mengenai cara menambahkan badge didalam objek lain seperti contohnya pada tombol untuk menampilkan berapa notifikasi yang masuk dll, untuk contoh penggunaan skripnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama badge_dalam_objek.html, lalu kita buka di browser maka hasilnya :

Keterangan :

• anda bisa menambahkan badge didalam objek lain semisal tombol dengan cara menambahkan tag <span> diantara tag <button> dan </button>, didalam tag <span> tersebut berikan class badge, serta tambahkan contextual class sesuai dengan tampilan badge yang diinginkan.

 

Baik sekian dulu pembahasan mengenai cara membuat badge dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.