Tutorial Bootstrap 4

Tutorial Belajar Bootstrap 4 Part 14 – Membuat List dengan Bootstrap

Selamat datang lagi dalam tutorial warung belajar, masih dalam seri tutorial mengenai bootstrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat pagination dan breadcrumb dengan bootstrap, dalam tutorial kali ini kita akan membahas mengenai cara membuat list dengan bootstrap.

Untuk teman – teman yang belum mengetahui apa itu list silahkan lihat tutorial kita mengenai list di html Cara Membuat Daftar/List di HTML, nah di bootstrap memiliki beberapa class yang bisa digunakan untuk mengatur tampilan dari list agar terlihat lebih menarik.

Cara membuat list dengan bootstrap

Untuk membuat list didalam bootstrap anda perlu menambahkan beberapa class antara lain :

  • menambahkan class .list-group didalam tag <ul>
  • tambahkan class .list-group-item pada tag <li>

untuk contoh penggunaan skripnya adalah seperti berikut ini :

Semisal kita simpan dengan nama list_bootstrap.html, lalu kita buka di browser hasilnya :

 

 

Menambahkan highlight dengan class .active

Untuk memberikan highlight pada list, anda dapat mendapatkan menambahkan class .active pada bagian tag <li> yang akan mendapatkan highlight, untuk contoh skripnya adalah sebagai berikut :

semisal kita simpan dengan nama list_highlight.html, lalu kita buka di browser maka hasilnya :

Keterangan :

  • Untuk List dibagian linux akan terdapat highlight (berwarna biru) karena dibagian tag <li> kita tambahkan class active

 

 

Disabled list dengan class .disabled

Selain class .active yang digunakan untuk memberikan highlight pada list, anda juga bisa disable bagian list tertentu dengan menambahkan class .disabled pada tag <li> yang ingin didisable, untuk contohnya adalah sebagai berikut :

Semisal kita simpan dengan nama list_disabled.html, lalu kita buka di browser maka hasilnya :

Keterangan :

  • Terlihat untuk list bagian linux memiliki warna yang berbeda, hal tersebut karena kita menambahkan class disabled dalam tag <li>

 

 

Contextual Class pada list

Anda juga bisa memberikan warna pada bagian list, untuk mengganti warna pada list anda tinggal menambahkan contextual class, beberapa class yang bisa anda gunakan 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
  • list-group-item-light

Untuk contoh penggunaan skrip adalah sebagai berikut :

semisal kita simpan dengan nama contextual_class.html, lalu kita buka di browser :

Keterangan :

  • Warna List akan ditampilkan berdasarkan class yang digunakan, jadi silahkan menyesuaikan contextual class yang ingin digunakan dengan warna yang diinginkan.

 

 

Menambahkan link pada bagian list

Anda juga bisa menambahkan link pada bagian list yang dibuat, untuk contoh pembuatan link pada bagian list adalah sebagai berikut :

Semisal kita simpan dengan nama link_list_bootstrap.html, lalu silahkan buka dibrowser :

Keterangan :

  • untuk membuat list dengan isi link, silahkan buat tag <div> dan tambahkan class list-group
  • didalam tag <div> silahkan tambahkan tag <a> untuk membuat link
  • pada tag <a> tambahkan class list-group-item
  • anda juga menambahkan contextual class yang telah dibahas dalam bagian sebelumnya didalam tag <a> untuk mengatur warna list yang ada pada bagian link

 

Sekian dulu teman – teman tutorial mengenai cara membuat list dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial bootstrap selanjutnya

Leave a Reply

Your email address will not be published. Required fields are marked *