Cara Membuat List Group pada Bootstrap – Setelah sebelumnya kita sudah bisa Membuat Button Responsive, sekarang kita akan membuat List Group pada Bootstrap.
Cara Membuat List Group pada Bootstrap
Membuat List Group pada Bootstrap sangatlah mudah, hanya dengan menggunakan class .list-group
pada elemen <ul>
dan class .list-group-item
pada elemen <li>
. Lihat contoh berikut.
<ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>
Active State
Yang dimaksud active state adalah ada salah satu list yang aktif. Akif yang dimaksud disini adalah listnya berwarna primary (biru). Lihat kode dibawah ini,
<ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>
Link di Dalam List
Kita juga bisa menambahkan link di dalam list menggunakan .list-group-item-action
. Lihat contoh berikut,
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div>
Disabled Item
Class .disabled
digunakan untuk menandai bahwa list tersebut tidak aktif. Jika digunakan dalam Link, class ini akan menghilangkan efek hover di link tersebut. Begini contohnya,
<div class="list-group"> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item">Third item</a> </div>
Menghilangkan Border
Untuk menghilangkan border dalam list, gunakan class .list-group-flush
. Lihat contoh berikut,
<ul class="list-group list-group-flush"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul>
Contextual Class
Contextual class juga bisa dipakai untuk memberi warna pada list item.
<ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul>
List Group with Badges
Kita juga memberi badges pada list item. Coba scroll ke bawah sampai bagian footer situs ini, dalam bagian kategori ada angka yang menandakan jumlah isi dari tiap kategori, kita bisa memodifikasi bagian tersebut dengan menambahkan badges pada list item.
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Inbox <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Ads <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Junk <span class="badge badge-primary badge-pill">99</span> </li> </ul>
Sekian artikel tentang Cara Membuat List Group pada Bootstrap. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.
Very good written story. It will be supportive to anybody who utilizes it, as well as yours truly :). Keep up the good work – for sure i will check out more posts.