List Group Bootstrap: Bootstrap Tutorial #18

Review by : Sutiono S.Kom., M.Kom., M.T.I

Selamat datang kembali, Dalam Pembahasan kali ini kita masih berada dalam seri bootstrap yaitu mengenai List Group. List Group merupakan komponen dari bootstrap yang sangat fleksibel untuk digunakan menampilkan serangkaian konten.

Biasanya List group dapat kita buat sederhana dengan HTML biasa menggunakan tag <ol> atau <ul> dengan didalam nya terdapat tag <li>. Tetapi kali ini kita akan membuat list group menggunakan “sentuhan” Bootstrap agar terlihat lebih menarik.

Baik lah mari kita mulai

Section Artikel

1 Dasar List Group Bootstrap
2 List Group Dengan Link
3 Flush Border
4 Horizontal List Group
5 List Group Berwarna
6 List Group dengan Badges

Dasar List Group Bootstrap

List Group dibuat dengan memasukkan class .list-group kedalam tag <ul> atau <ol>, dengan item nya sendiri menggunakan tag <li> dengan class .list-group-item.

Untuk menandai mana item yang saat ini dilihat atau aktif teman – teman dapat menggunakan class .active setelah class .list-group-item.

contoh sederhananya adalah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Dasar List Group</h2>
    <ul class="list-group">
      <li class="list-group-item active">Item Pertama</li>
      <li class="list-group-item">Item Kedua</li>
      <li class="list-group-item">Item Ketiga</li>
    </ul>
  </div>

  </body>
</html>

List Group Dengan Link

Berbeda dengan membuat list group sederhana diatas, menambahkan link didalam list group tidak menggunakan tag <ol> atau <ul>, melainkan menggunakan tag <div> yang diberi class .list-group. Dan menggunakan tag <a> sebagai ganti dari tag <li> tetapi dengan class yang sama yaitu .list-group-item.

Contohnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Contoh List group dengan link </h2>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action disabled">Home</a>
      <a href="#" class="list-group-item list-group-item-action">Profil</a>
      <a href="#" class="list-group-item list-group-item-action">Data</a>
    </div>
  </div>

  </body>
</html>

Ada sebuah class tambahan yaitu class .list-group-item-action digunakan untuk menambahkan latar belakang abu – abu. Sedangkan class .disabled digunakan untuk men-disable atau menonakifkan item list group

Flush Border

Yang dimaksud flush border disini adalah menghilangkan garis border pembatas, ini digunakan untuk kesan yang lebih menyatu dengan konten dari website itu sendiri. Untuk menggunakan nya cukup menambahkan class .list-group-flush setelah class .list-group atau bida dikatakan beriringan dengan class .list-group dahulu kemudian .list-group-flush.

contohnya:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Home</li>
      <li class="list-group-item">Profil</li>
      <li class="list-group-item">Bag</li>
    </ul>
  </div>

  </body>
</html>

Horizontal List Group

List Group tidak hanya bisa dibuat searah vertikal tetapi juga dapat diarahkan secara horizontal yaitu dengan menambahkan class .list-group-horizontal setelah class .list-group.

contoh perogramnya adalah

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h3>Horizontal list group</h3>
    <ul class="list-group list-group-horizontal">
      <li class="list-group-item">Home</li>
      <li class="list-group-item">Profil</li>
      <li class="list-group-item">Bag</li>
    </ul>
  </div>
  </body>
</html>

List Group Berwarna

Membuat list group berwarna pada dasarnya sama dengan membuat alert pada bootstrap, jika tema – teman belum membaca artikel tersebut ada baiknya dibaca terlebih dahulu agar lebih paham. Didalam nya terdapat banyak class seperti .danger , .primary , .secondary, dan lain-lain.

Class pada alert tersebut juga dapat kita gunakan pada list group untuk memberi tahu pengguna seberapa penting list ini atau bisa juga untuk memperindah tampilan. Daftar class nya adalah

Class	warna
`.list-group-item-success`	List group dengan background hijau
`.list-group-item-`primary	List group dengan background biru muda
`.list-group-item-secondary`	List group dengan background abu-abu muda
`.list-group-item-info`	List group dengan background biru
`.list-group-item-warning`	List group dengan background kuning
`.list-group-item-danger`	List group dengan background merah
`.list-group-item-dark`	List group dengan background gelap
`.list-group-item-light`	List group dengan background putih

tabel warna

contoh penggunaan nya dalah seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
  </ul>
</div>

</body>
</html>

List Group dengan Badges

List group selain dikreasi dengan menambahkan link atau warna, juga bisa dikreasikan dengan menambahkan Badges. Jika teman – teman belum mengatahui mengenai badges bootstrap maka silahkan baca terlebih dahulu artikel Badges Bootstrap: Bootstrap Tutorial #11.

contoh penggunaannya adalah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Inbox
      <span class="badge badge-primary badge-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      E-mail
      <span class="badge badge-primary badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Spam
      <span class="badge badge-primary badge-pill">99</span>
    </li>
  </ul>
</div>

</body>
</html>

Penjelasan:

class badge didalam list group dimasukkan dalam tag <span> untuk membuat ruang tentunya agar badge bisa muncul
class .d-flex digunakan untuk mengatur layout dari list group, jika class ini dihilangkan maka badge akan menempel dengan tulisan item list (inbox, email, spam).
class .justify-content-between digunakan untuk perataan diantara item list group dan badge
class .align-items-center digunakan untuk perataan dari tulisan didalam item list dan badges agar rata tengah

Sekian penjelasan mengenai List group, selebihnya dapat teman – teman kreasikan sendiri dengan menggunakan CSS atau class bootstrap lainya. Terima kasih

YogaBayu

Seorang yang menyukai dunia elektronika dan website.

Tags: Bootstraplistlist group bootstraplist group html