Belajar Bootstrap Part 9 (Membuat List dengan Bootstrap)

ASSALAMU'ALAIKUM Wr. Wb.

Membuat List dengan Bootstrap

Sekarang kita akan mempelajari bagaimana cara Membuat List Dengan Bootstrap. Untuk membuat list dengan Bootstrap seperti biasa, saya kira cukup mudah kita tinggal memasukkan class Bootstrap saja. Tambahkan class "list-group" pada tag <ul> pembuka.

<ul class="list-group">

Kemudian tambahkan class "list-group-item" pada setiap tag <li> pembuka yang menandakan bahwa list tersebut merupakan pembuka dari list

<li class="list-group-item">

Berikut contoh penggunaan List pada Bootstrap

hasil

kalian juga bisa menambahkan penandaan dengan warna pada list Bootstrap diatas. Yaitu dengan menambahkan class berikut :

• list-group-item-success : Untuk membuat list berwarna hijau
• list-group-item-info : Untuk membuat list berwarna biru
• list-group-item-warning : Untuk membuat list berwarna kuning
• list-group-item-danger : Untuk membuat list berwarna merah

 Perhatikan contoh berikut :

hasil

Membuat List Badge dengan Bootstrap

hasil

Kesimpulan
Untuk membuat list responsive dan modern kita dapat menggunakan class Bootstrap seperti yang sudah saya jelaskan diatas kita hanya tinggal mengkreasikan sesuai pemikiran kita.

Sekian dari Saya apabila ada kesalahan mohon dimaafkan.TerimaKasih

WASSALAM