Tutorial Bootstrap 4 #12 : Badge Pada Bootstrap 4

Badge Pada Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 lengkap di www.malasngoding.com.

Pada tutorial bootstrap 4 bagian ke 12 ini, kita akan belajar tentang salah satu komponen yang disediakan oleh bootstrap. yaitu badge.

Badge Bootstrap 4

Badge adalah sebuah komponen untuk membuat label, dan perhitungan kecil. biasanya komponen badge digunakan untuk membuat label, dan menampilkan angka dalam bentuk label.

Badge bisa diterapkan pada berbagai elemen HTML, bisa dibuat dalam element heading, tombol, table dan lain-lain.

Untuk membuat badge dengan bootstrap 4, tulis class .badge, kemudian tulis class jenis badge yang ingin digunakan.

Berikut adalah jenis-jenis badge yang disediakan oleh bootstrap 4.

• .badge-primary
• .badge-secondary
• .badge-success
• .badge-danger
• .badge-warning
• .badge-info
• .badge-light
• .badge-dark

Membuat Badge Dengan Bootstrap 4

Untuk membuat badge dengan bootstrap 4, tulis class .badge, kemudian lanjutkan dengan menulis class jenis badge yang ingin dibuat.

Contoh badge bootstrap 4.

Dan berikut hasil contoh badge bootstrap 4.

badge pada bootstrap 4

Badge Pill Bootstrap 4

Badge Pill adalah jenis badge yang berbentuk oval, badge pill menerapkan css border-radius, sehingga sudut dari badge berukutan oval.

Dan berikut adalah contoh dari badge pill yang disediakan bootstrap 4.

Untuk membuat badge pill, kita tinggal menambahkan class .badge-pill seperti contoh berikut.

Dan hasil contohnya.

badge pill bootstrap 4

Seperti yang terlihat pada gambar di atas, perbedaan dari badge biasa dan badge pill ada pada bentuknya, dimana badge pill memiliki bentuk yang sudut nya lebih bulat.

Badge Link

Bootstrap 4 juga menyediakan badge dalam bentuk link. untuk membuat badge dalam bentuk link kita bisa langsung menuliskan class .badge dan class jenis badge nya pada element hyperlink.

Seperti pada contoh berikut.

Bentuknya akan sama seperti badge biasa, tapi pada saat diklik, maka akan di arahkan ke url yang sudah ditetapkan seperti pada contoh di atas saya membuat contoh dengan link yang menuju https://www.malasngoding.com.

Contoh Penerapan Badge Bootstrap 4 Dengan Komponen Lain

Seperti yang sudah disinggung sebelumnya, komponen badge ini bisa diterapkan atau di gabung dengan komponen lainnya. perhatikan contoh berikut.

Pada contoh pertama di atas, kita coba menerapkan badge pada elemen heading. dan pada contoh kedua di atas, kita mencoba menerapkan badge pada elemen tombol.

Oh ya, pada contoh di atas, ada komponen tombol dari bootstrap. tapi belum kita pelajari, tentang komponen tombol bootstrap akan kita bahas pada tutorial bootstrap 4 selanjutnya di www.malasngoding.com.

Jika kita jalankan, maka hasilnya akan seperti berikut.

contoh penggunaan bootstrap 4

Oke, penerapan badge pada komponen bootstrap lainnya selesai. silahkan teman-teman bereksperimen dengan mencoba-coba sendiri agar lebih familiar dengan class-class bootstrap 4.

Penutup

Pada tutorial badge ini kita telah belajar tentang cara membuat badge dengan bootstrap 4, badge pill, juga menerapkan dan membuat contoh penggunaan badge pada komponen bootstrap 4 lainnya.

Berikut contoh source code full nya.

Sekian tutorial bootstrap 4 bagian 12 tentang badge ini. semoga dapat bermanfaat.

Download Source Code

Demo