Grup Daftar Bootstrap

Grup Daftar Dasar

Grup daftar paling dasar adalah daftar tidak berurutan dengan item daftar:

• barang pertama
• Barang kedua
• Barang ketiga

Untuk membuat grup daftar dasar, gunakan <ul>elemen dengan class .list-group, dan <li>elemen dengan class .list-group-item:

Daftar Grup Dengan Lencana

Anda juga dapat menambahkan lencana ke grup daftar. Lencana akan secara otomatis diposisikan di sebelah kanan:

• 12 Baru
• 5 Dihapus
• 3 Peringatan

Untuk membuat lencana, buat <span>elemen dengan kelas .badge di dalam item daftar:

Daftar Grup Dengan Item Tertaut

Item dalam grup daftar juga bisa berupa hyperlink. Ini akan menambahkan warna latar belakang abu-abu saat mengarahkan kursor:

Untuk membuat grup daftar dengan item tertaut, gunakan <div>alih- alih <ul> dan <a>sebagai ganti <li>:

Status Aktif

Gunakan .activekelas untuk menyorot item saat ini:

Item yang Dinonaktifkan

Grup daftar berikut memiliki item yang dinonaktifkan:

Untuk menonaktifkan item, tambahkan .disabledkelas:

Kelas Kontekstual

Kelas kontekstual dapat digunakan untuk mewarnai item daftar:

• barang pertama
• Barang kedua
• Barang ketiga
• Barang keempat

Kelas-kelas untuk mewarnai list-item adalah: .list-group-item-success, list-group-item-info, list-group-item-warning, dan .list-group-item-danger:

Konten Khusus

Anda dapat menambahkan hampir semua HTML di dalam item grup daftar.

Bootstrap menyediakan kelas .list-group-item-headingdan .list-group-item-textyang dapat digunakan sebagai berikut: