Bootstrap 4 List Groups

Basic List Groups

First item
Second item
Third item

Để tạo list group, sử dụng thẻ <ul> với class .list-group, và thẻ <li> với class .list-group-item:

Ví dụ

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Active State

Active item
Second item
Third item

Sử dụng class .active để highlight item:

Ví dụ

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

List Group với Linked Items

First item Second item Third item

Để tạo một list group theo kiểu link để có thể click, sử dụng thẻ <div> thay vì <ul> và <a> thay vì <li>. Add class .list-group-item-action nếu bạn muốn hiệu ứng hover:

Ví dụ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Disabled Item

Class .disabled thêm màu chữ nhạt hơn vào mục cần disable. Và khi sử dụng trên links, nó sẽ bỏ hiệu ứng hover đi:

Disabled item Disabled item Third item

Ví dụ

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Remove Borders (Loại bỏ một số border)

First item
Second item
Third item
Fourth item

Ví dụ

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Horizontal List Groups

Nếu bạn muốn list hiển thị theo chiều ngang thay vì dọc như mặc định, add class .list-group-horizontal cạnh .list-group:

First item
Second item
Third item
Fourth item

Ví dụ

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Contextual Classes (Hay còn gọi là các lớp ngữ cảnh - các tiện ích này thường dùng để tạo màu)

Success item
Secondary item
Info item
Warning item
Danger item
Primary item
Dark item
Light item

Các class để đánh màu cho list-items gồm: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark và list-group-item-light,:

Ví dụ

<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>

Link items với Contextual Classes

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item

Ví dụ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

List Group với Badges

Inbox12
Ads50
Junk99

Ví dụ

<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">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>