Cara Membuat List Group pada Bootstrap

Assalamu'alaikum Wr.Wb
Salam dan Bahagia

Pendahuluan
Pada kali ini saya kan membagikan sedkit tutorial nih bagaimana sih cara untuk membuat list Grup pada framework Bootstrap, nah langsung saja dibaca dan dipahami.

Latar Belakang
Ingin lebih memahami tentang tag-tag css pada bootstrap salah satunya adalah pada tag pembuatab list grup.

Maksud Dan tujuan
       Dapat membuat list group dengan framework bootstrap.
       Membuat list group yang responsive.

Alat dan Bahan
       Laptop.
       Teks Editor.
       Browser.

Jangka Waktu yang dibutuhkan
        40 Menit

Pembahasan atau langkah Kerja
      Nah sebelumnya apasih list Grup itu? List Group dengan Collapse Bootstrap, merupakan penggabungan dari 3 komponen yang ada di Framework CSS Bootstrap. yaitu terdiri dari Button, List Group dan Collapse Bootstrap

Nah Dibootstrap Sendiri sangat banyak sekali tipe-tipe list grup yang tersedia contohnya :

• Basic Example
• Active Item
• Disable Item
• Links And Button
• Flush
• Contextual classes
• With Badges

Untuk Membuatnya sangatlah mudah kita tinggal Membuat atau menggunakan tag <ul> Setelah itu tambahkan class "list-group", Nah Kemudia tambahkan "list-group-item" pada tah <li> Yang menandakan bahwa itu merupakan anak-anak dari list Grup tersebut, pada kali ini saya akan mencotohkan pembuatan list group pada "basic Example, Active Item dan With Badges".

Berikut Source Code nya :

Nah Untuk membuat list Basic Example dan Active Item caranya hampir sama akan tetapi pada active item untuk membuat list tersebut active kalian harus menambahkan class baru pada tag <li> yaitu class " active"

Maka Hasilnya akan Seperti ini :

Nah Sekarang akan saya contohkan membuat list yang bertipe "With badges" yang dimana list ini memiliki nilai dibagian sebelah kanannya, untuk membuatnya kalian hanya perlu menambahkan baris berikut pada setiap list.

<a href="#"><span class="badge pull-right">12</span>Nama_list</a>

Maka Akan Menjadi seperti Ini :

Nah Gimana? Mudah bukan.

     Dengan adanya Bootstrap ini menjadikan programmer mudah untuk membuat list group dengantampilan yang elegant.

Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih.

Wassalamu'alaikum Wr.Wb