Notifications
unread notification
Emily Johnson
commented on a task in
Design Sprint
12 minutes ago
upload notification
Michael Lee
uploaded files to
Marketing Assets
25 minutes ago
Just now
alert
Sophia Ray
flagged an issue in
Bug Tracker
40 minutes ago
event notification
David Kim
scheduled a meeting for
UX Review
1 hour ago
edit
Isabella White
updated the document in
Product Specs
2 hours ago
30 minutes ago
List Group
Examples
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.
List Group on Bootstrap
<ul class="list-group">
<li class="list-group-item">Dropbox Cloud Storage</li>
</ul>
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.
- Dropbox Cloud Storage
- Slack Team Collaboration
- Microsoft Windows OS
- Zendesk Customer Support
- Stripe Payment Integration
<ul class="list-group">
<li class="list-group-item active">GitHub Repository</li>
<li class="list-group-item">Figma Design Tool</li>
</ul>
Add
.active
to a
.list-group-item
to indicate the current active selection.
- GitHub Repository
- Figma Design Tool
- Notion Workspace
- Trello Task Manager
- DigitalOcean Cloud
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Dropbox Cloud Storage</li>
<li class="list-group-item">Slack Team Collaboration</li>
<li class="list-group-item">Microsoft Windows OS</li>
</ul>
Add
.disabled
to a
.list-group-item
to make it
appear
disabled.
- Dropbox Cloud Storage
- Slack Team Collaboration
- Microsoft Windows OS
- Zendesk Customer Support
- Stripe Payment Integration
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Stripe Payment Integration
</a>
<a href="#" class="list-group-item list-group-item-action">Dropbox Cloud Service</a>
<button type="button" class="list-group-item list-group-item-action">Slack Communication</button>
<button type="button" class="list-group-item list-group-item-action">Notion Productivity App</button>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Zendesk Support Tool</a>
</div>
Use
<a>
s or
<button>
s to create
actionable
list group items with hover, disabled, and active states by adding
.list-group-item-action
.
<ul class="list-group list-group-flush">
<li class="list-group-item">Slack Collaboration Tool</li>
<li class="list-group-item">Dropbox Cloud Storage</li>
<li class="list-group-item">Notion Workspace Organizer</li>
<li class="list-group-item">Zendesk Customer Support</li>
<li class="list-group-item">Stripe Payment Processor</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).
- Slack Collaboration Tool
- Dropbox Cloud Storage
- Notion Workspace Organizer
- Zendesk Customer Support
- Stripe Payment Processor
<ul class="list-group list-group-horizontal mb-3">
<li class="list-group-item">Slack</li>
<li class="list-group-item">Notion</li>
<li class="list-group-item">Dropbox</li>
</ul>
<ul class="list-group list-group-horizontal-sm mb-3">
<li class="list-group-item">Figma</li>
<li class="list-group-item">Stripe</li>
<li class="list-group-item">Zendesk</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Trello</li>
<li class="list-group-item">Asana</li>
<li class="list-group-item">ClickUp</li>
</ul>
Add
.list-group-horizontal
to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant
.list-group-horizontal-{sm|md|lg|xl}
to make a list group horizontal starting at that breakpoint’s
min-width
.
- Slack
- Notion
- Dropbox
- Figma
- Stripe
- Zendesk
- Trello
- Asana
- ClickUp
<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>
Use contextual classes to style list items with a stateful background and color.
- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Darius ac facilities 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>
Use contextual classes to style list items with a stateful background and color.
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2">List group item heading</h5>
<small>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>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2">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>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-2">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>
</a>
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Gmail Notifications
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Unprocessed Orders
<span class="badge bg-success rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Urgent Tickets
<span class="badge bg-danger rounded-pill">99+</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Completed Transactions
<span class="badge bg-success rounded-pill">20+</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Invoices Awaiting Approval
<span class="badge bg-warning rounded-pill">12</span>
</li>
</ul>
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Gmail Notifications 14
- Unprocessed Orders 2
- Urgent Tickets 99+
- Completed Transactions 20+
- Invoices Awaiting Approval 12
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="newsletterCheckbox">
<label class="form-check-label" for="newsletterCheckbox">Subscribe to newsletter</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="termsCheckbox">
<label class="form-check-label" for="termsCheckbox">Accept terms and conditions</label>
</li>
</ul>
<ul class="list-group mt-2">
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="notificationOptions" value="" id="emailRadio" checked>
<label class="form-check-label" for="emailRadio">Notify by Email</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="notificationOptions" value="" id="smsRadio">
<label class="form-check-label" for="smsRadio">Notify by SMS</label>
</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.
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Premium Admin</div>
Premium Admin
</div>
<span class="badge bg-primary rounded-pill">865</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Premium React Admin</div>
Premium React Admin
</div>
<span class="badge bg-primary rounded-pill">140</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Angular Version</div>
Angular Version
</div>
<span class="badge bg-primary rounded-pill">85</span>
</li>
</ol>
Numbers are generated by
counter-reset
on the
<ol>
, and then styled and placed with a
::before
psuedo-element on the
<li>
with
counter-increment
and
content
.
-
865Premium AdminHTML Admin
-
140Premium React AdminReact Admin
-
85Premium Angular VersionAngular Version