Halo sahabat programmer jumpa lagi dengan saya di blog afrizatul.com. Setelah sebelumnya kita berhasil membuat Alert pada bootstrap 4 kali ini kita akan mencoba membuat badges.
Sebelum membuat badges pada bootstrap 4 pastikan teman-teman sudah membaca seri Tutorial Belajar Bootstrap 4 untuk pemula lainnya. Agar lebih mudah untuk melanjutkan dan mempelajari ke bagian selanjutnya.
Oke langsung saja kita membuat badges, apa sih itu badges pada bootstrap 4?
Badges merupakan sebuah tanda yang biasanya terletak pada samping tombol atau button di sebuah tampilan website. Badges sendiri berguna untuk memberikan penjelasan khusus pada bagian-bagian tertentu. Misalnya seperti New, Hot, Trending, Viral, dan lain-lainnya pada sebuah website.
Tanpa basa basi langsung saja kita ke tutorial cara pembuatan badges di bootstrap 4.
Pertama silahkan lakukan persiapan terlebih dahulu agar artikel ini tidak panjang lebar silahkan teman-teman baca tutorial bootstrap 4 untuk pemula seri : Tutorial Belajar Bootstrap 4 Untuk Pemula #1 : Pengenalan dan Cara Install
Oke sekarang saya asumsikan bahwa teman-teman sudah melakukan persiapan.
Silahkan masukkan kode dibawah ini diantara tag <body> pada file index teman-teman.
<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>
Save project file teman-teman lalu akses dibrowser maka tampilannya akan seperti ini :
Sedikit saya jelaskan bahwa yang kita buat sebenarnya adalah beberapa tag heading yang terdiri dari heading 1-6 dan tulisan “New” berbackground abu-abu itulah yang namanya badges.
Untuk lebih jelasnya kita akan membuat sebuah tombol tag a href yang memiliki bermacam-macam background dan tulisan.
Silahkan copy kode dibawah ini pada file index.php teman-teman.
<a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-warning">Warning</a> <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a>
Save. dan hasilnya akan seperti ini :
Jika tombolnya kekecilan, saya akan memberikan contoh kodingan untuk tombol yang berukuran besar dan memiliki badges untuk mempermudah kita.
Berikut codenya :
<button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button>
Save. lalu hasilnya akan seperti ini :
Nah melihat gambar diatas pasti kalian tidak asing lagi, kalian sering melihatnya di sebuah website biasanya pada widget di sidebar untuk kategori berjenis cloud (tag awan).
Akhir Kata
Itu lah bagaimana cara membuat badges pada bootstrap 4, yang bisa kamu kreasikan lagi untuk tampilannya supaya lebih menarik dan mempermudah kita dalam membuat website. Jika ada yang kurang paham silahkan komentar dibawah ya. Jangan lupa untuk membaca tutorial seri lengkap bootstrap 4 untuk pemula. bye
