Membuat Badges Menggunakan Bootstrap 4

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. Normal badges

Ini merupakan badges standar jika sobat ingi menggunakan secara default, cara penulisannya adalah sebagai berikut

Tampilannya :

2. Pill Badges

Bentuknya seperti pill oleh sebab itu dinamakan pill badges, cara penulisannya adalah sebagau berikut

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

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 :

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

Untuk membuat tombol dengan badges yang di dalamnya terdapat icon, kodenya adalah sebagai berikut :

Tampilan :

Kita juga bisa membuat tombolnya menjadi berbentuk seperti pill/pill button, kodenya adalah sebagai berikut :

Tampilan :

5. Badges Diatas Ico

Pada badges ini, kita bisa meletakkan pada atas icon, cara penulisannya adalah sebagai berikut

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 :

Sampai jumpa pada postingan saya selanjutnya..

6 thoughts on “Membuat Badges Menggunakan Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

four × three =