Bootstrap 4 – List Groups

Trong Bootstrap list groups là một component giúp style cho các list. Giúp tạo nên những list phức tạp với nội dung tùy chỉnh.

Tạo Default List Group

Sử dụng class .list-group trong element <ul>. Và class .list-group-item trong <li>

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <ul class="list-group">
      <li class="list-group-item">These Boots Are Made For Walking</li>
      <li class="list-group-item">Eleanor, Put Your Boots On</li>
      <li class="list-group-item">Puss 'n' Boots</li>
      <li class="list-group-item">Die With Your Boots On</li>
      <li class="list-group-item">Fairies Wear Boots</li>
      </ul>

  </div>

</body>

</html>

Badges

Bạn có thể thêm badges vào list groups và canh chỉnh chúng với các class justify-content-between, .badge-secondary (color, background-color).

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <ul class="list-group">
      <li class="list-group-item justify-content-between">
      These Boots Are Made For Walking
      <span class="badge badge-secondary badge-pill">15</span>
      </li>
      <li class="list-group-item justify-content-between">
      Eleanor, Put Your Boots On
      <span class="badge badge-secondary badge-pill">38</span>
      </li>
      <li class="list-group-item justify-content-between">
      Puss 'n' Boots
      <span class="badge badge-secondary badge-pill">76</span>
      </li>
      <li class="list-group-item justify-content-between">
      Die With Your Boots On
      <span class="badge badge-secondary badge-pill">112</span>
      </li>
      <li class="list-group-item justify-content-between">
      Fairies Wear Boots
      <span class="badge badge-secondary badge-pill">181</span>
      </li>
      </ul>
  </div>

</body>

</html>

Linked List Groups

Bạn có thể dùng class .list-group-item-action để style action cho một item.

Để tạo Linked List Groups. Bạn sử dụng <div> và <a> thay thế cho <ul> và <li>.

Và thêm class .active vào <a> mà bạn muốn active.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>
      <a href="#" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</a>
      <a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
      <a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a>
      <a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
    </div>
  </div>

</body>

</html>

Buttons

Bạn cũng có thể sử dụng button thay cho link. Dùng button với class .list-group-item/.list-group-item-action.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="list-group">
      <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button>
      <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</button>
      <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
      <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button>
      <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
    </div>
  </div>

</body>

</html>

Disabled Items

Dùng .disabled cùng với .list-group-item để style cho item dạng disable

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>
      <a href="#" class="list-group-item list-group-item-action disabled">Eleanor, Put Your Boots On</a>
      <a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
      <a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a>
      <a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
    </div>
  </div>

</body>

</html>

Contextual Classes

Bạn có thể sử dụng nhóm Contextual Classes cho list group items. Thêm .list-group-item-* vào list group item.

Khi một item .active nó sẽ có style màu tối hơn bình thường.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made For Walking</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put Your Boots On (active)</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots On</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
    </div>
  </div>

</body>

</html>

Custom Content

List groups có thể chứa các element. Bạn có thể thêm thẻ <p>, heading… trong <a>

Bootstrap 4 cung cấp .list-group-item-heading cho heading và .list-group-item-text cho text.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action  list-group-item-info">
        <h4>These Boots Are Made For Walking</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">
        <h4>Puss 'n' Boots</h4>
        <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning active">
        <h4>Fairies Wear Boots</h4>
        <p>Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
          inventore veritatis.</p>
      </a>
    </div>
  </div>

</body>

</html>