Membuat List Group Di Dalam Bootstrap

Hallo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat list-group yang ada di Bootstrap. List-group didalam Bootstrap merupakan komponen yang fleksibel dan kuat yang digunakan untuk menampilkan content yang komplek dan disesuikan didalam daftar. Cara membuat list-group didalam Bootstrap teman-teman bisa ikuti langkah-langkahnya dibawah ini.

Basic List-Group

Pertama kalian bisa buat tag <ul> kemudian didalam tag <ul> kalian bisa tambahakan class list-group. Kemudain didalan tag <li>, kalian bisa tambahkan class list-group-item. Berikut adalah contoh penggunaannya :

Add Badge

Kemudian jika kalian ingin menambahakan badge (lencana) didalam setiap kompnen list kalian bisa membuat tag <span> didalam li yang ingin kalian tambahkan badge, kemudian didalam tag <span> tersebut tambahkan class badge, berikut adalah contoh penggunaannya :

Linked Item

Didalam list group ini kalian juga bisa mengkelompokan daftar itemnya, cara kalian bisa gunakan tag <a> bukan tag <li>, kemudian tag <a> tersebut kita bungkus menggunakan tag <div>. Berikut adalah contoh penggunaannya :

Custom Linked Item

Kalian juga bisa mengcustom list item link yang ada diatas, misalnya kalian inigin memberikan judul atau menambahkan sebuah paragraph, caranya seperti gambar dibawah ini :