Cara Membuat Badges Menggunakan Bootstrap 4 – Pada bootsrtap disediakan pula badges yang bisa kita gunakan dengan mudah. badges ini biasa digunakan untuk mempercantik tampilan misalkan pada status Pending, Approve, dll mempunyai backgrounf yang berbeda sehingga memudahkan user karena biasanya dengan warna user akan lebih mudah mengerti atau memang males bacanya. Selain itu badges ini juga bisa digunakan untuk memberitahukan bahwa ada notifikasi atau pesan. Supaya mencolok tentunya kita menggunakan badges ini. Dalam bootstrap badges juga mempunyai banyak varian warna.
Pada contoh kali ini saya akan menjelaskan badges pada element, header, di dalam button maupun menggunakan icon. Tentunya sebelum menggunakan badges ini sobat memerlukan beberapa librari css dan js. Yang paling wajib tentunya adalah bootstrap dan karena kita juga akan membuatnya dengan icon maka kita juga memerlukan fontawesome.css karena dalam boostrap tidak ada iconnya. Dan karena ini unutk keperluan demo jadi saya menggunakan librari css dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu. Atau sobat bisa mendownloadnya bersama dengan project ini pada akhir postingan. Pada tag <head> tambahkan dengan baris dibawah
|
1 2 3 4 5 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
1. Normal badges
Ini merupakan badges standar jika sobat ingi menggunakan secara default, cara penulisannya adalah sebagai berikut
|
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> |
Tampilannya :
2. Pill Badges
Bentuknya seperti pill oleh sebab itu dinamakan pill badges, cara penulisannya adalah sebagau 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> |
Tampilannya :
3. Heading Badges
Sebenarnya tidak hanya di heading saja, tapi sobat bisa memasukkannya pada tag <p>..</p>, <span>…</span>, <li>…</li>, dan masih banyak lagi. Sesuai kebutuhan sobat saja. Cara penggunaanya adalah sebagai berikut
|
1 2 3 4 5 6 |
<h1>Example heading <span class="badge badge-secondary">New</span></h1> <h2>Example heading <span class="badge badge-secondary">New</span></h2> <h3>Example heading <span class="badge badge-secondary">New</span></h3> <h4>Example heading <span class="badge badge-secondary">New</span></h4> <h5>Example heading <span class="badge badge-secondary">New</span></h5> <h6>Example heading <span class="badge badge-secondary">New</span></h6> |
Tampilan :
4. Badges di dalam button
Dengan menggunakan <button> kita juga bisa menambahkan badges didalamnya. Namun tidak bisa jika menggunakan <input type=’button’>. Cara penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button type="button" class="btn btn-primary mb-3"> Notifications <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button> <button type="button" class="btn btn-success mb-3"> Notifications <span class="badge badge-info">9</span> <span class="sr-only">unread messages</span> </button> <button type="button" class="btn btn-warning mb-3"> <span class="badge badge-success">9</span> Notifications <span class="sr-only">unread messages</span> </button> |
Tampilan :
Untuk warnanya bisa diubah menjadi apa saja sesuai dengan apa yang sudah saya bahas ada postingan sebelumnya. Selain angka di dalam badges kita juga bisa menggantinya dengan icon. Tentunya kita harus memasukkan terlebih dahulu librari fontawesomenya. Seperti pada contoh di paling atas yaitu pada baris
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
Untuk membuat tombol dengan badges yang di dalamnya terdapat icon, kodenya adalah sebagai berikut :
|
1 2 3 4 |
<button type="button" class="btn btn-info"> <span class="badge badge-light"><i class="fa fa-bell text-warning"></i></span> Notifications <span class="sr-only">unread messages</span> </button> |
Tampilan :
Kita juga bisa membuat tombolnya menjadi berbentuk seperti pill/pill button, kodenya adalah sebagai berikut :
|
1 2 3 4 |
<button type="button" class="btn badge-pill btn-primary"> <span class="badge badge-pill badge-light">10</span> Notifications <span class="sr-only">unread messages</span> </button> |
Tampilan :
5. Badges Diatas Ico
Pada badges ini, kita bisa meletakkan pada atas icon, cara penulisannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 |
<span class="fa-stack fa-3x has-badge" data-count="99"> <i class="fa fa-bell fa-stack-1x"></i> </span> <span class="fa-stack fa-3x has-badge" data-count="99"> <i class="fa fa-bell fa-stack-1x text-warning"></i> </span> <span class="fa-stack fa-3x has-badge" data-count="99"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-bell fa-stack-1x fa-inverse"></i> </span> |
Tampilannya :
Masih banyak yang bisa sobat gunakan dengan badges ini. Sesuai dengan kreatifitas sobat sendiri. Sekian postingan saya tentang Membuat Badges Menggunakan Bootstrap 4. Apabila ada kesalahan saya mohon maaf dan apabila ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah. Sampai ketemu lagi pada postingan saya selanjutnya.
Baca juga :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :