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.
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
<!-- List Group: normal -->
<ul class="list-group list-group-custom">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<!-- List Group: with badge left side -->
<ul class="list-group list-group-custom">
<li class="list-group-item">
<span class="badge bg-primary me-2">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge bg-danger me-2">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge bg-info me-2">1</span>
Morbi leo risus
</li>
<li class="list-group-item">
<span class="badge bg-warning me-2">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge bg-secondary me-2">1</span>
Morbi leo risus
</li>
</ul>
<!-- List Group: with badge pill right side -->
<ul class="list-group list-group-custom">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge bg-danger rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge bg-info rounded-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge bg-warning rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge bg-secondary rounded-pill">1</span>
</li>
</ul>
<!-- List Group: with checkbox -->
<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>
<!-- List Group: User list -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
<li class="list-group-item px-md-4 py-3">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="assets/images/xs/avatar1.jpg" alt="">
<div class="flex-fill ms-3 text-truncate">
<h6 class="d-flex justify-content-between mb-0"><span>Chris Fox</span></h6>
<span class="text-muted">ChrisFox@alui.com</span>
</div>
</a>
</li>
<li class="list-group-item px-md-4 py-3">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded-circle no-thumbnail">RH</div>
<div class="flex-fill ms-3 text-truncate">
<h6 class="d-flex justify-content-between mb-0"><span>Robert Hammer</span></h6>
<span class="text-muted">RobertHammer@alui.com</span>
</div>
</a>
</li>
<li class="list-group-item px-md-4 py-3">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="assets/images/xs/avatar3.jpg" alt="">
<div class="flex-fill ms-3 text-truncate">
<h6 class="d-flex justify-content-between mb-0"><span>Orlando Lentz</span></h6>
<span class="text-muted">RobertHammer@alui.com</span>
</div>
</a>
</li>
<li class="list-group-item px-md-4 py-3">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="assets/images/xs/avatar4.jpg" alt="">
<div class="flex-fill ms-3 text-truncate">
<h6 class="d-flex justify-content-between mb-0"><span>Barbara Kelly</span></h6>
<span class="text-muted">RobertHammer@alui.com</span>
</div>
</a>
</li>
<li class="list-group-item px-md-4 py-3">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="assets/images/xs/avatar5.jpg" alt="">
<div class="flex-fill ms-3 text-truncate">
<h6 class="d-flex justify-content-between mb-0"><span>Robert Hammer</span></h6>
<span class="text-muted">RobertHammer@alui.com</span>
</div>
</a>
</li>
</ul>
<!-- List Group: Notification -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
<li class="list-group-item d-flex py-3">
<div class="avatar"><i class="fa fa-thumbs-o-up fa-lg"></i></div>
<div class="flex-grow-1">
<h6 class="mb-0">7 New Feedback <small class="float-right text-muted">Today</small></h6>
<small>It will give a smart finishing to your site</small>
</div>
</li>
<li class="list-group-item d-flex py-3">
<div class="avatar"><i class="fa fa-user fa-lg"></i></div>
<div class="flex-grow-1">
<h6 class="mb-0">New User <small class="float-right text-muted">10:45</small></h6>
<small>I feel great! Thanks team</small>
</div>
</li>
<li class="list-group-item d-flex py-3">
<div class="avatar"><i class="fa fa-question-circle fa-lg"></i></div>
<div class="flex-grow-1">
<h6 class="mb-0 text-warning">Server Warning <small class="float-right text-muted">10:50</small></h6>
<small>Your connection is not private</small>
</div>
</li>
<li class="list-group-item d-flex py-3">
<div class="avatar"><i class="fa fa-check fa-lg"></i></div>
<div class="flex-grow-1">
<h6 class="mb-0 text-danger">Issue Fixed <small class="float-right text-muted">11:05</small></h6>
<small>WE have fix all Design bug with Responsive</small>
</div>
</li>
<li class="list-group-item d-flex py-3">
<div class="avatar"><i class="fa fa-shopping-basket fa-lg"></i></div>
<div class="flex-grow-1">
<h6 class="mb-0">7 New Orders <small class="float-right text-muted">11:35</small></h6>
<small>You received a new oder from Tina.</small>
</div>
</li>
</ul>
<!-- List Group: iOT list with switch -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group1">
<label class="form-check-label" for="list-group1">Front Door</label>
</div>
</li>
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group2" checked="">
<label class="form-check-label" for="list-group2">Air Conditioner</label>
</div>
</li>
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group3">
<label class="form-check-label" for="list-group3">Enable RTL Mode!</label>
</div>
</li>
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group4">
<label class="form-check-label" for="list-group4">Front Door</label>
</div>
</li>
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group5">
<label class="form-check-label" for="list-group5">Air Conditioner</label>
</div>
</li>
<li class="list-group-item d-flex align-items-center py-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="list-group6" checked="">
<label class="form-check-label" for="list-group6">Washing Machine</label>
</div>
</li>
</ul>
Add .active
to a .list-group-item
to indicate the current active selection.
Add .disabled
to a .list-group-item
to make it appear disabled. Note that some elements with .disabled
will also require custom JavaScript to fully disable their click events (e.g., links).
<ul class="list-group list-group-custom">
<li class="list-group-item active" aria-current="true">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item disabled">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</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">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Use contextual classes to style list items with a stateful background and color.
Contextual classes also work with .list-group-item-action
. Note the addition of the hover styles here not present in the previous example. Also supported is the .active
state; apply it to indicate an active selection on a contextual list group item.
Simple list group
list gorup with Anchor Link tag
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>