Belajar Bootstrap #45 List Group di Bootstrap

Ahmad Dika Zulfahmi

18 Maret 2025

Apa Itu List Group?

List Group adalah komponen Bootstrap yang digunakan untuk menampilkan daftar item dalam bentuk yang rapi dan mudah dikustomisasi. Kita bisa menambahkan berbagai fitur seperti tombol aktif, item yang dinonaktifkan, daftar horizontal, nomor, ikon, dan banyak lagi

1. Contoh Dasar List Group

Ini adalah contoh dasar List Group menggunakan elemen <ul> dengan item <li>.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item">Item pertama</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
        <li class="list-group-item">Item keempat</li>
        <li class="list-group-item">Item kelima</li>
    </ul>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

2. Item Aktif di List Group

Kita bisa menandai item yang sedang aktif dengan menambahkan class .active.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item active" aria-current="true">Item aktif</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

3. Item Dinonaktifkan (Disabled)

Gunakan .disabled untuk menonaktifkan item dalam list.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item disabled" aria-disabled="true">Item dinonaktifkan</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

4. List Group dengan Link dan Tombol

Kita bisa menggunakan <a> atau <button> untuk membuat item yang bisa diklik.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">Link aktif</a>
        <a href="#" class="list-group-item list-group-item-action">Link kedua</a>
        <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Link dinonaktifkan</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

dengan <button>:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action active">Tombol aktif</button>
        <button type="button" class="list-group-item list-group-item-action">Tombol kedua</button>
        <button type="button" class="list-group-item list-group-item-action" disabled>Tombol dinonaktifkan</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

5. List Group Tanpa Border (Flush List Group)

Gunakan .list-group-flush untuk menghilangkan border dan membuat tampilan lebih rapat.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group list-group-flush">
        <li class="list-group-item">Item pertama</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

6. List Group dengan Nomor (Numbered List Group)

Gunakan .list-group-numbered untuk menambahkan nomor secara otomatis ke daftar.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Item pertama</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
    </ol>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

7. List Group Horizontal

Gunakan .list-group-horizontal agar daftar tampil secara horizontal.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group list-group-horizontal">
        <li class="list-group-item">Item pertama</li>
        <li class="list-group-item">Item kedua</li>
        <li class="list-group-item">Item ketiga</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

8. List Group dengan Warna (Contextual Classes)

Gunakan class tambahan seperti .list-group-item-primary, .list-group-item-success, dll. untuk memberikan warna.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item list-group-item-primary">Item biru (primary)</li>
        <li class="list-group-item list-group-item-success">Item hijau (success)</li>
        <li class="list-group-item list-group-item-danger">Item merah (danger)</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

9. List Group dengan Badge (Lencana)

Gunakan badge untuk menampilkan angka atau informasi tambahan.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Item pertama
            <span class="badge bg-primary rounded-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Item kedua
            <span class="badge bg-success rounded-pill">5</span>
        </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

10. List Group dengan Konten Kustom

Gunakan elemen lain seperti <h5>, <p>, dan <small> di dalam item list.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">Judul Item</h5>
                <small>3 hari lalu</small>
            </div>
            <p class="mb-1">Deskripsi singkat tentang item ini.</p>
            <small>Tambahan informasi kecil.</small>
        </a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

11. List Group dengan Checkbox dan Radio Button

Kita bisa menambahkan checkbox atau radio button ke dalam list group.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox">
            Pilihan pertama
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox">
            Pilihan kedua
        </li>
    </ul>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

dengan Radio Button:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="options">
            Opsi pertama
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="options">
            Opsi kedua
        </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

berikut hasilnya:

Sebelumnya :
Belajar Bootstrap #44 Dropdowns di Bootstrap part 2

Selanjutnya :
Belajar Bootstrap #46 Modal di Bootstrap

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar Bootstrap #1 Fundamental Bootstrap

2. Belajar Bootstrap #10 CSS Variables Bootstrap

3. Belajar Bootstrap #11 Optimize Bootstrap

4. Belajar Bootstrap #12 Mengenal sistem kolom di Bootstrap

5. Belajar Bootstrap #13 Panduan lengkap gutters di Bootstrap

6. Belajar Bootstrap #14 Penjelasan sederhana utilities untuk layout di Bootstrap

7. Belajar Bootstrap #15 Penjelasan Z-index dalam Bootstrap

8. Belajar Bootstrap #16 Reboot Bootstrap

9. Belajar Bootstrap #17 Typography di Bootstrap

10. Belajar Bootstrap #18 Gambar di Bootstrap

11. Belajar Bootstrap #19 Table di Bootstrap part 1

12. Belajar Bootstrap #2 Alasan menggunakan Bootstrap

13. Belajar Bootstrap #20 Table di Bootstrap part 2

14. Belajar Bootstrap #21 Bootstrap Figures

15. Belajar Bootstrap #22 Penjelasan Form di Bootstrap

16. Belajar Bootstrap #23 Form Controls di Bootstrap

17. Belajar Bootstrap #24 Penjelasan Bootstrap Select

18. Belajar Bootstrap #25 Checkbox dan Radio Button di Bootstrap

19. Belajar Bootstrap #26 Range input di Bootstrap

20. Belajar Bootstrap #27 Input Group di Bootstrap

21. Belajar Bootstrap #28 Penjelasan Floating Labels di Bootstrap

22. Belajar Bootstrap #29 Layout Form di Bootstrap

23. Belajar Bootstrap #3 Persiapan Sebelum Belajar Bootstrap

24. Belajar Bootstrap #30 Validasi Form di bootstrap

25. Belajar Bootstrap #31 Accordion di Bootstrap

26. Belajar Bootstrap #32 Apa itu Bootstrap Alerts?

27. Belajar Bootstrap #33 Apa itu Badges di Bootstrap?

28. Belajar Bootstrap #34 Apa itu Breadcrumb di Bootstrap?

29. Belajar Bootstrap #35 Penggunaan Tombol (Buttons) di Bootstrap

30. Belajar Bootstrap #36 Button Group di Bootstrap

31. Belajar Bootstrap #37 Cards di Bootstrap part 1

32. Belajar Bootstrap #38 Cards di Bootstrap part 2

33. Belajar Bootstrap #39 Cards di Bootstrap part 3

34. Belajar Bootstrap #40 Apa itu Carousel di bootstrap

35. Belajar Bootstrap #41 Close Button di Bootstrap

36. Belajar Bootstrap #42 Apa itu Collapse di Bootstrap

37. Belajar Bootstrap #43 Dropdowns di Bootstrap part 1

38. Belajar Bootstrap #44 Dropdowns di Bootstrap part 2

39. Belajar Bootstrap #45 List Group di Bootstrap

40. Belajar Bootstrap #46 Modal di Bootstrap

41. Belajar Bootstrap #47 Navs dan tabs di Bootstrap

42. Belajar Bootstrap #48 Navbar di Bootstrap part 1

43. Belajar Bootstrap #49 Navbar di Bootstrap part 2

44. Belajar Bootstrap #5 Menggunnakan Bootstrap lewat unduhan manual

45. Belajar Bootstrap #50 Offcanvas di Bootstrap

46. Belajar Bootstrap #51 Pagination di Bootstrap

47. Belajar Bootstrap #52 Popover di Bootstrap

48. Belajar Bootstrap #53 Progress di Bootstrap

49. Belajar Bootstrap #54 Apa itu Scrollspy

50. Belajar Bootstrap #55 Bootstrap Spinners

51. Belajar Bootstrap #56 Toats di Bootstrap

52. Belajar Bootstrap #57 Tooltips di Bootstrap

53. Belajar Bootstrap #58 Clearfix dalam Bootstrap

54. Belajar Bootstrap #59 Colored Links di Bootstrap

55. Belajar Bootstrap #6 Cara Membuat Container Pada Bootstrap

56. Belajar Bootstrap #60 Ratios di Bootstrap

57. Belajar Bootstrap #61 Position Bootstrap

58. Belajar Bootstrap #62 Visually Hidden Bootstrap

59. Belajar Bootstrap #63 Stretched Link Bootstrap

60. Belajar Bootstrap #64 Text Truncation di Bootstrap

61. Belajar Bootstrap #65 Utility API di Bootstrap

62. Belajar Bootstrap #66 Background di Bootstrap

63. Belajar Bootstrap #67 Border di Bootstrap

64. Belajar Bootstrap #68 Bootstrap Colors

65. Belajar Bootstrap #69 Display Property di Bootstrap

66. Belajar Bootstrap #7 Memahami dan menerapkan grid

67. Belajar Bootstrap #70 Flexbox di Bootstrap

68. Belajar Bootstrap #71 Float Utility di Bootstrap

69. Belajar Bootstrap #72 Bootstrap Interactions

70. Belajar Bootstrap #73 Overflow di Bootstrap

71. Belajar Bootstrap #74 Position dalam Bootstrap

72. Belajar Bootstrap #75 Shadows di Bootstrap

73. Belajar Bootstrap #76 Bootstrap Sizing

74. Belajar Bootstrap #77 Spacing di Bootstrap

75. Belajar Bootstrap #78 Text Utilities di Bootstrap

76. Belajar Bootstrap #79 Vertical Alignment di Bootstrap

77. Belajar Bootstrap #8 Warna Tema dan Cara Penggunaannya

78. Belajar Bootstrap #80 Visibility di Bootstrap

79. Belajar Bootstrap #81 Icons di Bootstrap

80. Belajar Bootstrap #9 Komponen pada Bootstrap

Masuk Terlebih dahulu untuk berkomentar

Paling baru

Lihat Lainnya

ARTIKEL TERBARU

Mahardika Oktadiansyah - 30 April 2025

Belajar CSS Lanjutan #161 | CSS animation-delay Property

Mahardika Oktadiansyah - 30 April 2025

Belajar CSS Lanjutan #160 | CSS animation Property

Mahardika Oktadiansyah - 30 April 2025

Belajar CSS Lanjutan #159 | CSS all Property