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.
1 2 3 4 5 6 7 8 |
<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> |
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.
1 2 3 4 5 6 7 8 |
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> |
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.
1 2 3 4 5 6 7 8 |
<a href="https://www.malasngoding.com" class="badge badge-primary">Primary</a> <a href="https://www.malasngoding.com" class="badge badge-secondary">Secondary</a> <a href="https://www.malasngoding.com" class="badge badge-success">Success</a> <a href="https://www.malasngoding.com" class="badge badge-danger">Danger</a> <a href="https://www.malasngoding.com" class="badge badge-warning">Warning</a> <a href="https://www.malasngoding.com" class="badge badge-info">Info</a> <a href="https://www.malasngoding.com" class="badge badge-light">Light</a> <a href="https://www.malasngoding.com" class="badge badge-dark">Dark</a> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<h1>Contoh Heading <span class="badge badge-secondary">Baru!</span></h1> <h2>Contoh Heading <span class="badge badge-secondary">Baru!</span></h2> <h3>Contoh Heading <span class="badge badge-secondary">Baru!</span></h3> <h4>Contoh Heading <span class="badge badge-secondary">Baru!</span></h4> <h5>Contoh Heading <span class="badge badge-secondary">Baru!</span></h5> <h6>Contoh Heading <span class="badge badge-secondary">Baru!</span></h6> <br/> <button type="button" class="btn btn-primary"> Notifikasi <span class="badge badge-light">4</span> </button> <button type="button" class="btn btn-danger"> Pesan <span class="badge badge-warning">9</span> </button> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Membuat Badge Dengan Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <center> <h3>Tutorial Membuat Badge Dengan Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/badge-pada-bootstrap-4/">www.malasngoding.com</a></h4> </center> <br/> <br/> <br/> <h4>Badge</h4> <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> <br/> <br/> <h4>Badge Pill</h4> <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> <br/> <br/> <h4>Badge Link</h4> <a href="https://www.malasngoding.com" class="badge badge-primary">Primary</a> <a href="https://www.malasngoding.com" class="badge badge-secondary">Secondary</a> <a href="https://www.malasngoding.com" class="badge badge-success">Success</a> <a href="https://www.malasngoding.com" class="badge badge-danger">Danger</a> <a href="https://www.malasngoding.com" class="badge badge-warning">Warning</a> <a href="https://www.malasngoding.com" class="badge badge-info">Info</a> <a href="https://www.malasngoding.com" class="badge badge-light">Light</a> <a href="https://www.malasngoding.com" class="badge badge-dark">Dark</a> <br/> <br/> <br/> <h4>Contoh Penerapan</h4> <h1>Contoh Heading <span class="badge badge-secondary">Baru!</span></h1> <h2>Contoh Heading <span class="badge badge-secondary">Baru!</span></h2> <h3>Contoh Heading <span class="badge badge-secondary">Baru!</span></h3> <h4>Contoh Heading <span class="badge badge-secondary">Baru!</span></h4> <h5>Contoh Heading <span class="badge badge-secondary">Baru!</span></h5> <h6>Contoh Heading <span class="badge badge-secondary">Baru!</span></h6> <br/> <button type="button" class="btn btn-primary"> Notifikasi <span class="badge badge-light">4</span> </button> <button type="button" class="btn btn-danger"> Pesan <span class="badge badge-warning">9</span> </button> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
Sekian tutorial bootstrap 4 bagian 12 tentang badge ini. semoga dapat bermanfaat.
Tutorial Menarik Lainnya

Tutorial Bootstrap 4 #35 : Border Bootstrap 4


Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

