Tutorial Bootstrap Part 11 :Badge

Assalamu'alaikum W.W

Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang Badge pada Bootstrap

Judul
Tutorial Bootstrap Part 11 :Badge

Pengertian

Menurut Wikipedia, Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Latar Belakang

Mencari kemudahan dalam membuat front-end website yang cepat,responsive dan praktis sehingga kita tidak perlu menulis kode CSS dari nol.

Maksud dan Tujuan
Memahami dan bisa menggunakan Bootsrap sehingga pengembangan fron end website lebih efektif dan efisien.

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan

Badge digunakan untuk menambahkkan informasi tambahan untuk konten apapun. Untuk membuat Bagde, gunakan tag span lalu masukan class .badge badge -secondary. Bagian badge-secondary dapat diganti sesuai dengan makna color pada bootsrap 4 (warning, info dll).
 Contoh :

Contextual Badges
Gunakan class badge-* untuk mengatur warna badge. * dapa diganti dengan color bootstrap.
Contoh :

Badge pill
Badge pill merupakan class yang berfungsi untuk menagtur badge mejadi bulat.
contoh :

Badge di dalam Element
Biasanya digunakan untuk pesan yang belum dibaca.
COntoh :

Kesimpulan

Bootsrap memudahkan kita dalam mebuat badge shinga lebih praktis dan lebih efisien, karena kita tinggal memanggil kelas kelas Bootsrap.

Referensi

https://www.w3schools.com/bootstrap4/bootstrap_badges.asp

Share this post