Tutorial Bootstrap 4 #23 : List Group Bootstrap 4

List Group Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 di www.malasngoding.com.

Pada tutorial bootstrap 4 bagian ke 23 ini kita akan belajar tentang salah satu komponen bootstrap lagi. yaitu list group.

Pada seri tutorial bootstrap 3 sudah pernah dibahas pada tutorial sebelumnya, tentang cara membuat list dengan bootstrap.

Baca :

• Cara membuat list dengan bootstrap
• Tutorial Bootstrap 4 #7 : Membuat List

Pada tutorial ini akan dibahas tentang komponen list group bootstrap 4.

List Group Bootstrap 4

List Group adalah komponen yang disediakan oleh bootstrap untuk membuat konten list. List yang dimaksud sama seperti list yang kita buat menggunakan elemen list HTML.

Membuat list group dengan bootstrap 4

Perhatikan contoh berikut untuk cara membuat list (list group) dengan bootstrap.

hasilnya

list group bootstrap 4

Maka tampilan list group yang kita buat adalah seperti yang telihat pada gambar di atas.

Perhatikan pada contoh syntax di atas, untuk membuat list group kita bisa membuat class .list-group pada tag <ul>. kemudian pada bagian list nya ( <li> ), kita beri class .list-group-item.

Kita juga punya opsi untuk membuat list yang ditandai dengan menambahkan class .active pada list yang ingin kita tandai. pada contoh di atas kita memberikan class .active pada list budi.

List Group Disabled Item List

Bootstrap juga menyediakan opsi untuk membuat item list yang dinonaktifkan. yaitu dengan menggunakan class .disabled. Silahkan teman-teman tambahkan class .disabled pada item yang ingin teman-teman buat seolah-olah di disable.

Contoh

List Group Link dan Tombol

Jika pada contoh list sederhana sebelumnya, kita membuat list biasa, kita juga bisa membuat list hyperlink (link) atau tombol. Caranya cukup mudah.

Kita tinggal mengganti element <ul> dan elemen <li>.

Sebagai contoh, kita akan membuat tampilan menu yang berisi kumpulan link, dalam bentuk list group.

Jika sebelumnya kita menggunakan elemen <ul> dan <li> untuk membuat list, nah jika ingin membuat list yang berbentuk link dan tombol, kita gunakan elemen <div> dan <a> atau boleh juga menggunakan <button> jika ingin membuat tombol.

Hasilnya.

list group link dan button

cara membuatnya pun cukup mudah, perhatikan contoh syntax di atas.

kita tinggal menambahkan class .list-group-item dan .list-group-action.

List Group Flush

Jenis list ini adalah list yang tidak memiliki garis pinggir. jika teman-teman ingin menghilangkan garis pada bagian pinggir, atas dan bawahnya, teman-teman tinggal menambahkan class .list-group-flush pada bagian tag <ul> nya, beriringan dengan class .list-group.

Contoh

Hasil

list group flush

List Group Horizontal

Tambahkan class .list-group-horizontal untuk mengubah item list group dari vertikal ke horizontal.

Jika teman-teman ingin mengubah ukuran item pada list group horizontal, teman-teman bisa menggunakan class .list-group-horizontal-{sm|md|lg|xl}.

Jika ingin membuat ukuran item list group dengan ukuran kecil, bisa gunakan class .list-group-horizontal-sm, .list-group-horizontal-md untuk ukuran sedang, .list-group-horizontal-lg untuk ukuran besar. dan .list-grou-horizontal-xl untuk ukuran paling besar.

Tips Tambahan : gunakan class .flex-fill pada item list group. untuk membuat ukuran item list nya menjadi sama.

Contoh

Hasil.

list group horizontal

List Group Berwarna

Jika teman-teman membaca tutorial tutorial sebelumnya tentang bootstrap 4 di www.malasngoding.com, tentu teman-teman sudah mengerti class untuk memberi warna pada bootstrap, ada primary, secondary, info, danger, warning dan lain-lain.

Baca Juga : Tutorial Bootstrap 4 #11 : Alert Bootstrap 4

Class tersebut bisa kita terapkan juga pada list group. sudah ada class-class yang disediakan oleh bootstrap untuk pewarnaan list group. yaitu :

• list-group-item-primary
• list-group-item-secondary
• list-group-item-success
• list-group-item-danger
• list-group-item-warning
• list-group-item-info
• list-group-item-light
• list-group-item-dark

Contoh

Hasil

list group berwarna

List Group Badge

Kita juga bisa menerapkan badge pada list group. Komponen badge sendiri sudah dibahas pada tutorial bootstrap 4 sebelumnya.

Baca Juga : Tutorial Bootstrap 4 #12 : Badge Bootstrap 4

Contoh

Hasil

list group badge

Oke sekian tutorial tentang pengenalan komponen list group dan cara membuat group list bootstrap 4.

Silahkan teman-teman download dan lihat demo nya pada link berikut.

Demo

Download Source Code