Cara Membuat List Group pada Bootstrap

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

ranto.info

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.

1. <ul class="list-group">
2. <li class="list-group-item">First item</li>
3. <li class="list-group-item">Second item</li>
4. <li class="list-group-item">Third item</li>
5. </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,

1. <ul class="list-group">
2. <li class="list-group-item active">Active item</li>
3. <li class="list-group-item">Second item</li>
4. <li class="list-group-item">Third item</li>
5. </ul>

Link di Dalam List

Kita juga bisa menambahkan link di dalam list menggunakan .list-group-item-action. Lihat contoh berikut,

1. <div class="list-group">
2. <a href="#" class="list-group-item list-group-item-action">First item</a>
3. <a href="#" class="list-group-item list-group-item-action">Second item</a>
4. <a href="#" class="list-group-item list-group-item-action">Third item</a>
5. </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,

1. <div class="list-group">
2. <a href="#" class="list-group-item disabled">Disabled item</a>
3. <a href="#" class="list-group-item disabled">Disabled item</a>
4. <a href="#" class="list-group-item">Third item</a>
5. </div>

Menghilangkan Border

Untuk menghilangkan border dalam list, gunakan class .list-group-flush. Lihat contoh berikut,

1. <ul class="list-group list-group-flush">
2. <li class="list-group-item">First item</li>
3. <li class="list-group-item">Second item</li>
4. <li class="list-group-item">Third item</li>
5. <li class="list-group-item">Fourth item</li>
6. </ul>

Contextual Class

Contextual class juga bisa dipakai untuk memberi warna pada list item.

1. <ul class="list-group">
2. <li class="list-group-item list-group-item-success">Success item</li>
3. <li class="list-group-item list-group-item-secondary">Secondary item</li>
4. <li class="list-group-item list-group-item-info">Info item</li>
5. <li class="list-group-item list-group-item-warning">Warning item</li>
6. <li class="list-group-item list-group-item-danger">Danger item</li>
7. <li class="list-group-item list-group-item-primary">Primary item</li>
8. <li class="list-group-item list-group-item-dark">Dark item</li>
9. <li class="list-group-item list-group-item-light">Light item</li>
10. </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.

1. <ul class="list-group">
2. <li class="list-group-item d-flex justify-content-between align-items-center">
3. Inbox
4. <span class="badge badge-primary badge-pill">12</span>
5. </li>
6. <li class="list-group-item d-flex justify-content-between align-items-center">
7. Ads
8. <span class="badge badge-primary badge-pill">50</span>
9. </li>
10. <li class="list-group-item d-flex justify-content-between align-items-center">
11. Junk
12. <span class="badge badge-primary badge-pill">99</span>
13. </li>
14. </ul>

Sekian artikel tentang Cara Membuat List Group pada Bootstrap. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

https://codelatte.org