Tạo List Group trong Bootstrap

Tạo List Group để hiện thị danh sách các mục bằng cách sử dụng .list-group các phần tử con sử dụng .list-group-item. Ví dụ List Group với ba phần tử

<ul class="list-group">
    <li class="list-group-item">Phần tử 1</li>
    <li class="list-group-item">Phần tử 2</li>
    <li class="list-group-item">Phần tử 3</li>
</ul> 

• Phần tử 1
• Phần tử 2
• Phần tử 3

Hoặc xây dựng các item bằng <a>

<div class="list-group">
    <a class="list-group-item" href="#">Phần tử 1</a>
    <a class="list-group-item" href="#">Phần tử 2</a>
    <a class="list-group-item" href="#">Phần tử 3</a>
</div>

Các tùy chọn với List Group

• .active cho thêm vào item để kích hoạt hoạt động.
• .disabled cho thêm vào item thì vô hiệu hóa item
• .list-group-flush cho thêm vào phần tử gốc sẽ loại bỏ một số border của phần tử nhằm mục đích sử dụng List Group trong các thành phần khác, ví dụ đặt trong Card
• .group-item-{primary|secondary|success|danger|warning|info|light|dark} thêm vào item để tùy biến về nền
• .list-group-item-action cho thêm vào item để kích hoạt nó như là một điều khiển bấm vào để thực hiện một hành động nào đó
• Ngoài ra cũng có thể tùy biến item để hiện thị các nội dung phức tạp khác bằng các lớp đã biết

<ul class="list-group">
    <li class="list-group-item list-group-item-action">Phần tử 1</li>
    <li class="list-group-item active">Phần tử 2 | active</li>
    <li class="list-group-item disabled">Phần tử 3 | disabled</li>
    <li class="list-group-item list-group-item-danger">Phần tử 4 | list-group-item-danger</li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Phần tử 5
        <span class="badge badge-primary badge-pill">21</span>
    </li>
    <li class="list-group-item">Phần tử 3</li>
    <li class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small class="text-muted">Donec id elit non mi porta.</small>
    </li>
</ul>