Membuat List Dengan Bootstrap

Membuat List Dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh Membuat List Dengan Bootstrap

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>List</h4>
         <ul class="list-group">
            <li class="list-group-item">Item 1</li>
            <li class="list-group-item">Item 2</li>
            <li class="list-group-item">Item 3</li>
            <li class="list-group-item">Item 4</li>
         </ul>
      </div>
   </body>
</html>
HTML
Bootstrap

List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Anda dapat menyalin kode di atas ke file HTML Anda dan melihat hasilnya di browser. Kode tersebut menggunakan kelas list-group dari Bootstrap untuk membuat daftar dengan tampilan yang rapi dan responsif.

List Aktif

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>List Aktif</h4>
         <ul class="list-group">
            <li class="list-group-item active">Item 1</li>
            <li class="list-group-item">Item 2</li>
            <li class="list-group-item">Item 3</li>
         </ul>
      </div>
   </body>
</html>
HTML
Bootstrap

List Aktif

  • Item 1
  • Item 2
  • Item 3

Dalam contoh di atas, kita menggunakan kelas list-group untuk mengatur tampilan list menjadi grup. Kemudian, kita menambahkan kelas list-group-item pada setiap elemen list untuk membuat tampilan yang seragam.

Untuk membuat salah satu elemen list menjadi aktif, kita tambahkan kelas active pada elemen tersebut. Dalam contoh di atas, elemen pertama memiliki kelas active, sehingga akan ditampilkan dengan tampilan yang berbeda.

List Group With Linked Items

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>List Group With Linked Items</h4>
         <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">Item 1</a>
            <a href="#" class="list-group-item list-group-item-action">Item 2</a>
            <a href="#" class="list-group-item list-group-item-action">Item 3</a>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap

List Group With Linked Items

Item 1 Item 2 Item 3

Disabled Item

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>Disable Item</h4>
         <ul class="list-group">
            <li class="list-group-item disabled">Item 1</li>
            <li class="list-group-item disabled">Item 2</li>
            <li class="list-group-item">Item 3</li>
         </ul>
      </div>
   </body>
</html>
HTML
Bootstrap

Disable Item

  • Item 1
  • Item 2
  • Item 3

Dalam contoh di atas, kita menggunakan kelas list-group untuk membuat daftar grup. Kemudian, kita menambahkan kelas list-group-item pada setiap elemen <li> untuk membuat item dalam daftar. Untuk membuat item dinonaktifkan, kita tambahkan kelas disabled pada elemen <li>.

Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan Anda. Misalnya, Anda dapat mengubah teks item atau menambahkan atribut lain pada elemen <li>.

Horizontal List Groups

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>Horizontal List Groups</h4>
         <div class="list-group list-group-horizontal" id="myList" role="tablist">
            <a class="list-group-item list-group-item-action active" id="home-list" data-toggle="list" href="#home" role="tab" aria-controls="home">Home</a>
            <a class="list-group-item list-group-item-action" id="profile-list" data-toggle="list" href="#profile" role="tab" aria-controls="profile">Profile</a>
            <a class="list-group-item list-group-item-action" id="messages-list" data-toggle="list" href="#messages" role="tab" aria-controls="messages">Messages</a>
            <a class="list-group-item list-group-item-action" id="settings-list" data-toggle="list" href="#settings" role="tab" aria-controls="settings">Settings</a>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap

Horizontal List Groups


List Group dengan Badge

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>List Group with Badges</h4>
         <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
               Item 1
               <span class="badge bg-primary rounded-pill">5</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
               Item 2
               <span class="badge bg-primary rounded-pill">3</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
               Item 3
               <span class="badge bg-primary rounded-pill">8</span>
            </li>
         </ul>
      </div>
   </body>
</html>
HTML
Bootstrap

List Group with Badges

  • Item 1 5
  • Item 2 3
  • Item 3 8

Dalam contoh kode di atas, kita menggunakan class list-group untuk membuat List Group. Setiap item dalam List Group diberikan class list-group-item. Untuk menampilkan badge, kita menggunakan class badge dan rounded-pill untuk memberikan tampilan yang lebih bulat pada badge.

Anda dapat mengganti teks “Item 1”, “Item 2”, dan “Item 3” dengan teks yang sesuai dengan kebutuhan Anda. Anda juga dapat mengganti class badge-primary dengan class lain seperti badge-secondary, badge-success, badge-danger, dan lain-lain untuk memberikan warna yang berbeda pada badge.

Semoga contoh kode di atas dapat membantu Anda dalam membuat daftar dengan menggunakan Bootstrap. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

Artikel Terbaru ⭐