Tutorial Bootstrap Part 11 : Membuat Badges di Bootstrap

Assalamu'alaikum Wr. Wb.

A). Pendahuluan

      Bertemu lagi dengan saya Toni Andrihartono. Kali ini saya akan melanjutkan Tutorial Bootstrap Part 11 yaitu membuat Badges di Bootstrap. Kalian Tahu gak apa itu Badges dan kegunaannya untuk apa? Kalau belum tahu lihatlah blog saya di bawah ini.

B). Latar Belakang

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

C). Maksud & Tujuan

• Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.
• Badge di gunakan sebagai pemberian tambahan informasi dari sebuah konten.  

D). Pembahasan

      Badge adalah indikator dari berapa banyaknya item yang ada pada link tersebut.
        Badges di Bootstrap berfungsi untuk memberikan tanda atau lencana pada sebuah text atau text link yang tandanya di tandai dengan angka. Tujuan di berikannya Badges pada text tersebut adalah untuk memberitahukan kepada user bahawa text tersebut memiliki banyak isi artikel. Biasa nya Badges di gunakan pada bagian category yang ada di Website.

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

        Hasil Script:

      2. Badge Pill

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

        Hasil Script :

      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 :

        Hasil Script:

      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 :

 

     
  Hasil Script:

E). Kesimpulan

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

G). Referensi

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

Cukup sekian informasi yang dapat saya berikan pada hari ini, semoga bisa bermanfaat dan berguna buat orang lain. Jika ada kesalahan kata saya mohon maaf. Terima kasih telah mengunjungi blog saya,  dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog saya yang saat ini masih biasa-biasa saja.

  ~ Wassalamu'alaikum Wr. Wb. ~