Pada tutorial sebelumnya kita sudah belajar, Tutorial Belajar Bootstrap Bagian 8 : Cara Membuat Daftar di Bootstrap, selanjutnya kita akan mempelajari cara membuat daftar grup di Bootstrap.
Grup daftar adalah komponen yang sangat berguna dan fleksibel untuk menampilkan daftar elemen dengan cara yang indah.
Dalam bentuk paling dasar, grup daftar hanyalah daftar tak berurutan dengan class .list-group sedangkan, item daftar memiliki class .list-group-item.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap List Group</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item">Gambar</li>
<li class="list-group-item">Dokumen</li>
<li class="list-group-item">Musik</li>
<li class="list-group-item">Video</li>
</ul>
</div>
</body>
</html>
Daftar Grup dengan Item Tertaut
Anda juga dapat membuat hyperlink daftar item grup dengan sedikit perubahan pada markup HTML.
Cukup ganti <li> dengan tag <a> dan gunakan elemen <div> sebagai induk, bukan <ul>.
Anda juga dapat menambahkan ikon dan lencana ke grup daftar ini agar lebih elegan. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap List Group dengan Link Item </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<i class="fa fa-home"></i> Beranda
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-camera"></i> Gambar <span class="badge badge-pill badge-primary pull-right">145</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-music"></i> Musik <span class="badge badge-pill badge-primary pull-right">50</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-film"></i> Video <span class="badge badge-pill badge-primary pull-right">8</span>
</a>
</div>
</div>
</body>
</html>
Tip: Anda dapat menggunakan komponen grup daftar Bootstrap untuk membuat menu navigasi sidebar, mis. menampilkan daftar produk atau kategori di website Anda.
Anda juga dapat menambahkan elemen HTML lain seperti judul dan paragraf dalam grup daftar ini.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Linked List Group dengan Kustom Konten</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>Asteroid tereteksi mendekati bumi </h4>
<small>1 hari lalu </small>
</div>
<p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.</p>
</a>
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h4>Ilmuwan menemukan black hole raksasa</h4>
<small>2 hari lalu </small>
</div>
<p>Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>NASA meluncurkan robot matahari </h4>
<small>3 hari lalu </small>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
</a>
</div>
</div>
</body>
</html>
Daftar Grup dengan Status Kontekstual
Seperti kebanyakan komponen lainnya, Anda juga dapat menggunakan class kontekstual pada item grup daftar untuk menerapkan penekanan ekstra pada mereka. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 List Group with Contextual States</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item"> Item daftar grup default sederhana </li>
<li class="list-group-item list-group-item-primary">Item primary list group sederhana</li>
<li class="list-group-item list-group-item-secondary">Item secondary list group sederhana</li>
<li class="list-group-item list-group-item-success">Item success list group sederhana</li>
<li class="list-group-item list-group-item-danger">Item danger list group sederhana</li>
<li class="list-group-item list-group-item-warning">Item warning list group sederhana</li>
<li class="list-group-item list-group-item-info">Item info list group sederhana</li>
<li class="list-group-item list-group-item-light">Item light list group sederhana</li>
<li class="list-group-item list-group-item-dark">Item dark list group sederhana</li>
</ul>
</div>
</body>
</html>
Demikian pula, Anda dapat menggunakan class kontekstual ini ke item grup daftar tertaut. Anda juga dapat menggunakan class .active untuk menentukan item grup daftar aktif. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Linked List Group dengan Contextual States</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"> Item daftar grup default sederhana </a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Item primary list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Item secondary list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Item success list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Item danger list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Item warning list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Item info list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Item light list group sederhana</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Item dark list group sederhana</a>
</div>
</div>
</body>
</html>
Semoga tutorial ini bisa membantu Anda mempelajari cara membuat daftar grup di Bootstrap.
