List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Bootstrap List group documentation
<ul class="list-group">
<li class="list-group-item active"><i class="fas fa-home list-group-icon"></i> Dashboard</li>
<li class="list-group-item"><i class="fas fa-user-circle list-group-icon"></i> Profile</li>
<li class="list-group-item"><i class="fas fa-tasks list-group-icon"></i> Tasks</li>
<li class="list-group-item"><i class="fas fa-layer-group list-group-icon"></i> Projects</li>
<li class="list-group-item"><i class="fas fa-users list-group-icon"></i> Members</li>
</ul>
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-home list-group-icon"></i> Dashboard</li>
<li class="list-group-item"><i class="fas fa-user-circle list-group-icon"></i> Profile</li>
<li class="list-group-item"><i class="fas fa-tasks list-group-icon"></i> Tasks</li>
<li class="list-group-item"><i class="fas fa-layer-group list-group-icon"></i> Projects</li>
<li class="list-group-item disabled"><i class="fas fa-users list-group-icon"></i> Members</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Profile</li>
<li class="list-group-item">Settings</li>
<li class="list-group-item">Tasks</li>
</ul>
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Profile
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Settings
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Tasks
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
</ul>
Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our list group to create tabbable panes of local content.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>