Panduan Membuat List Group pada Bootstrap 4

List Group yang paling dasar pada Bootstrap 4 adalah Unordered List. Berikut adalah tampilannya:

List Group

Untuk membuat List Group seperti contoh diatas, kita dapat menggunakan elemen <ul> dengan class .list-group dan elemen <li> dengan class .list-group-item. Contoh:

<ul class="list-group">
  <li class="list-group-item">Item Pertama</li>
  <li class="list-group-item">Item Kedua</li>
  <li class="list-group-item">Item Ketiga</li>
</ul>

Lihat kode di Github | Lihat Live Demo


List Group Aktif (Active State)

Berikut adalah contoh tampilan dari List Group Aktif atau Active State:

 List Group Aktif (Active State)

Untuk membuatnya, kita dapat menggunakan class .active untuk memberikan penanda atau Highlight pada item yang telah ditentukan. Contoh:

<ul class="list-group">
  <li class="list-group-item active">Item Pertama</li>
  <li class="list-group-item">Item Kedua</li>
  <li class="list-group-item">Item Ketiga</li>
</ul>

Lihat kode di Github | Lihat Live Demo

List Group dengan Link

Untuk membuat List Group yang berisi Link didalamnya, kita dapat menggunakan elemen <div> sebagai pengganti dari elemen <ul> diikuti dengan elemen <a> sebagai pengganti dari elemen <li>. Selain itu, kita juga dapat menggunakan class .list-group-item-action jika kita ingin membuat Background dari List Group menjadi berwarna abu-abu ketika di Hover. Contoh:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item Pertama</a>
  <a href="#" class="list-group-item list-group-item-action">Item Kedua</a>
  <a href="#" class="list-group-item list-group-item-action">Item Ketiga</a>
</div>

Lihat kode di Github | Lihat Live Demo

List Group Disable

Kita dapat men-disable (tidak dapat diklik) List Group dengan menggunakan class .disabled. Jika class tersebut diterapkan pada List Group Link, maka akan menghapus efek Hover. Contoh:

List Group Disable

<div class="list-group">
  <a href="#" class="list-group-item disabled">Item Disabled</a>
  <a href="#" class="list-group-item disabled">Item Disabled</a>
  <a href="#" class="list-group-item">Item Ketiga</a>
</div>

Lihat kode di Github | Lihat Live Demo

Menghapus Garis Tepi/Batas pada List Group

Untuk mengapusnya, kita dapat menggunakan class .list-group-flush. Class tersebut berfungsi untuk menghapus garis batas/tepi (Border) dan Rounded Corner. Contoh:

Menghapus Garis Tepi/Batas pada List Group

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item Pertama</li>
  <li class="list-group-item">Item Kedua</li>
  <li class="list-group-item">Item Ketiga</li>
</ul>

Lihat kode di Github | Lihat Live Demo

List Group Horizontal

Jika kita ingin membuat List secara horizontal (rata kesamping), kita dapat menambahkan class .list-group-horizontal kedalam class .list-group. Contoh:

List Group Horizontal

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item Pertama</li>
  <li class="list-group-item">Item Kedua</li>
  <li class="list-group-item">Item Ketiga</li>
</ul>

Lihat kode di Github | Lihat Live Demo

Class Konteks pada List Group

Kita juga dapat menggunakan Class Konteks (Contextual Class) untuk menambahkan warna pada List Group. Contoh:

Class Konteks pada List Group

Class yang dapat kita gunakan untuk mewarnai List Group antara lain: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark dan .list-group-item-light. Contoh:

<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> 

Lihat kode di Github | Lihat Live Demo

List Group Link dengan Class Konteks

Sama seperti sebelumnya, bedanya hanya List Group ini menggunakan Link. Contoh:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div> 

Lihat kode di Github | Lihat Live Demo

List Group dengan Badge

Kita juga dapat menggabungkan class .badge dengan class Utility untuk menambahkan badge kedalam List Group. Contoh:

List Group dengan Badge

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Kotak Masuk
        <span class="badge badge-primary badge-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Spam
        <span class="badge badge-primary badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Draft
        <span class="badge badge-primary badge-pill">99</span>
    </li>
</ul> 

Lihat kode di Github | Lihat Live Demo

0 Komentar