Tutorial Bootstrap Part 11 : Membuat Badges di Bootstrap

Assalamu'alaikum W. W.

Abdul Hafid Gunawan - Hai Sobat setia SC Blog berjumpa lagi dengan saya Abdul Hafid Gunawan di Blog kesayangan ini. Kali ini saya akan melanjutkan Tutorial Bootstrap Part 11. Langsung saja cekidot.

PENGERTIAN

SleepingCodings - Badges atau jika di artikan ke Bahasa Indonesia adalah lencana. Badges di bootstrap di gunakan untuk memberikan sebuah informasi tambahan ke konten apapun.

LATAR BELAKANG

Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

MAKSUD DAN TUJUAN

- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.

- Badge di gunakan sebagai pemberian tambahan informasi dari sebuah konten.

ALAT DAN BAHAN

- Text Editor

PEMBAHASAN

1. Badge

Penggunaan Badge dengan cara memanggil Class .badge yang tersedia di Bootstrap, Contoh Penerapannya, cekidot :

2. Badge Pill

Penggunaan Badge Pill dengan cara memanggil Classsnya dengan cara .badge .badge-pill yang sudah tersedia di Bootstrap, Contoh Penerapannya, cekidot :

3. Badge Button

Penggunaan Badge Button ini ialah dengan cara membuat Button sebagai pembungkus Class .badge yang di mana nanti seperti sebuah tombol Pemberitahuan seperti di Facebook, Contoh Penerapannya, cekidot : 

4. Badge Button + Input

Penggunaan Badge Button + Input ini seringkali di tanyakan oleh teman", bagaimana sih cara nya membuat Input yang memiliki Badge di dalamnya, dan seperti inilah Contoh Penerapannya : 

KESIMPULAN

Membuat Badge sangatlah mudah & lebih efisien menggunakan Bootstrap, kita hanya perlu memanggil Class" yang telah di sediakan oleh Bootstrap.

REFERENSI

- http:///www.w3schools.com/bootstrap4/bootstrap_badges.html