Default List
Use list-group class in an unordered list and list-group-item class to create a default list group.
- Buy fresh vegetables for dinner
- Pick up groceries from the store
- Order takeout for the family tonight
- Prepare snacks for the movie night
- Plan a weekend picnic in the park
<ul class="list-group">
<li class="list-group-item">Buy fresh vegetables for dinner</li>
<li class="list-group-item">Pick up groceries from the store</li>
<li class="list-group-item">Order takeout for the family tonight</li>
<li class="list-group-item">Prepare snacks for the movie night</li>
<li class="list-group-item">Plan a weekend picnic in the park</li>
</ul>Active Item List
Use active class to list-group-item to indicate the current active selection.
- Currently selected task in progress
- Complete the project proposal by Friday
- Schedule a meeting with the team
- Review the budget for next quarter
- Prepare presentation for client meeting
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Currently selected task in progress</li>
<li class="list-group-item">Complete the project proposal by Friday</li>
<li class="list-group-item">Schedule a meeting with the team</li>
<li class="list-group-item">Review the budget for next quarter</li>
<li class="list-group-item">Prepare presentation for client meeting</li>
</ul>Disabled Items List
Use disabled class to list-group-item to make it appear disabled.
- Currently unavailable item in stock
- Fresh organic apples from local farm
- Ripe bananas perfect for smoothies today
- Sweet cherries for your summer desserts
- Dried dates, great for snacking anytime
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Currently unavailable item in stock</li>
<li class="list-group-item">Fresh organic apples from local farm</li>
<li class="list-group-item">Ripe bananas perfect for smoothies today</li>
<li class="list-group-item">Sweet cherries for your summer desserts</li>
<li class="list-group-item">Dried dates, great for snacking anytime</li>
</ul>List with Link
Use <a> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>List with Button
Use <button> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
Simply dummy text of the printing
<span class="badge float-end bg-primary">243</span>
</button>
<button type="button" class="list-group-item list-group-item-action">
There are many variations of passages
<span class="badge float-end bg-secondary-subtle text-secondary">35</span>
</button>
<button type="button" class="list-group-item list-group-item-action">
All the Lorem Ipsum generators
<span class="badge float-end bg-info-subtle text-info">132</span>
</button>
<button type="button" class="list-group-item list-group-item-action">
All the Lorem Ipsum generators
<span class="badge float-end bg-success-subtle text-success">2525</span>
</button>
<button type="button" class="list-group-item list-group-item-action" disabled>
A disabled item meant to be disabled
<span class="badge float-end bg-danger-subtle text-danger">21</span>
</button>
</div>List with Numbered
Use list-group-numbered class (optionally use an <ol> element) to show numbered list group items.
- Prepare the project timeline
- Conduct a market analysis
- Draft the initial design concepts
- Gather feedback from stakeholders
- Finalize the project plan
<ol class="list-group list-group-numbered">
<li class="list-group-item">Prepare the project timeline</li>
<li class="list-group-item">Conduct a market analysis</li>
<li class="list-group-item">Draft the initial design concepts</li>
<li class="list-group-item">Gather feedback from stakeholders</li>
<li class="list-group-item">Finalize the project plan</li>
</ol>Flush List
Use list-group-flush class to remove some borders and rounded corners to render list group items.
-
JDJohn Doe
-
JSJane Smith
-
EJEmily Johnson
-
MBMichael Brown
-
SDSarah Davis
<ul class="list-group fs-13 fw-medium list-group-flush">
<li class="list-group-item">
<div class="d-flex align-items-center gap-2">
<div class="avatar-item avatar avatar-title text-primary bg-primary-subtle">
JD
</div>
John Doe
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center gap-2">
<div class="avatar-item avatar avatar-title text-secondary bg-secondary-subtle">
JS
</div>
Jane Smith
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center gap-2">
<div class="avatar-item avatar avatar-title text-info bg-info-subtle">
EJ
</div>
Emily Johnson
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center gap-2">
<div class="avatar-item avatar avatar-title text-danger bg-danger-subtle">
MB
</div>
Michael Brown
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center gap-2">
<div class="avatar-item avatar avatar-title text-warning bg-warning-subtle">
SD
</div>
Sarah Davis
</div>
</li>
</ul>Borderless List
Use list-borderless class to list-group-item to remove border and create a normal list.
- First item description
- Second item description
- Third item description
- Fourth item description
- Fifth item description
<ul class="list-group list-borderless">
<li class="list-group-item"> <span class="bullet me-2"></span>First item description</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Second item description</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Third item description</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Fourth item description</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Fifth item description</li>
</ul>Small Size List
Use list-group-sm class to list-group-item to create a small size list.
- Complete the project proposal
- Review the budget report
- Schedule the team meeting
- Prepare presentation slides
- Send out the meeting agenda
<ul class="list-group list-group-sm list-borderless">
<li class="list-group-item"> <span class="bullet me-2"></span>Complete the project proposal</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Review the budget report</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Schedule the team meeting</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Prepare presentation slides</li>
<li class="list-group-item"> <span class="bullet me-2"></span>Send out the meeting agenda</li>
</ul>List with Badges
Use badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Top Gaming Headsets of 2023 Published
- Ultra HD Sound System In Development
- Summer Music Festival Highlights Published
- Wireless Earbuds Giveaway Pending Approval
- Next-Gen Audio Accessories In Development
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Top Gaming Headsets of 2023
<span class="badge bg-success-subtle text-success">Published</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ultra HD Sound System
<span class="badge bg-primary-subtle text-primary">In Development</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Summer Music Festival Highlights
<span class="badge bg-success-subtle text-success">Published</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Wireless Earbuds Giveaway
<span class="badge bg-warning-subtle text-warning">Pending Approval</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Next-Gen Audio Accessories
<span class="badge bg-primary-subtle text-primary">In Development</span>
</li>
</ul>List with Checkbox
Use Bootstrap’s checkboxes within list group items and customize as needed.
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" id="firstCheckbox">
<label class="form-check-label" for="firstCheckbox">Responsive Design Templates</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" id="secondCheckbox">
<label class="form-check-label" for="secondCheckbox">Interactive Data Visualizations</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">Customizable Dashboard Widgets</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" id="forthCheckbox">
<label class="form-check-label" for="forthCheckbox">Mobile App UI Kits</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" id="fifthCheckbox">
<label class="form-check-label" for="fifthCheckbox">User Experience Enhancements</label>
</li>
</ul>List with Radios
Use Bootstrap’s radios within list group items and customize as needed.
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" id="firstRadio" checked>
<label class="form-check-label" for="firstRadio"> Fresh Produce </label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" id="secondRadio">
<label class="form-check-label" for="secondRadio"> Home Decor </label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" id="thirdRadio">
<label class="form-check-label" for="thirdRadio"> Skincare Products </label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" id="forthRadio">
<label class="form-check-label" for="forthRadio"> Fiction Novels </label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" id="fifthRadio">
<label class="form-check-label" for="fifthRadio"> Smart Home Devices </label>
</li>
</ul>Contextual Classes
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
<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>Sub headings
Use contextual classes to style list items with a stateful background and color.
-
Quantum Computing Breakthroughs New algorithms are enhancing processing speeds significantly.
320 Views -
Renewable Energy Growth Solar and wind power installations reach record highs this year.
180 Views -
Cybersecurity Challenges Rising threats demand innovative security solutions.
275 Views -
Space Exploration Milestones Mars missions unveil new discoveries about the planet's geology.
150 Views
<ol class="list-group list-group-numbered">
<li class="list-group-item d-sm-flex justify-content-between align-items-start">
<p class="ms-2 me-auto mb-0 text-muted">
<span class="fw-semibold fs-14">Quantum Computing Breakthroughs</span> New algorithms are enhancing processing speeds significantly.
</p>
<span class="badge bg-primary-subtle text-primary">320 Views</span>
</li>
<li class="list-group-item d-sm-flex justify-content-between align-items-start">
<p class="ms-2 mb-0 me-auto text-muted">
<span class="fw-semibold fs-14">Renewable Energy Growth</span> Solar and wind power installations reach record highs this year.
</p>
<span class="badge bg-secondary-subtle text-secondary">180 Views</span>
</li>
<li class="list-group-item d-sm-flex justify-content-between align-items-start">
<p class="ms-2 mb-0 me-auto text-muted">
<span class="fw-semibold fs-14">Cybersecurity Challenges</span> Rising threats demand innovative security solutions.
</p>
<span class="badge bg-success-subtle text-success">275 Views</span>
</li>
<li class="list-group-item d-sm-flex justify-content-between align-items-start">
<p class="ms-2 mb-0 me-auto text-muted">
<span class="fw-semibold fs-14">Space Exploration Milestones</span> Mars missions unveil new discoveries about the planet's geology.
</p>
<span class="badge bg-danger-subtle text-danger">150 Views</span>
</li>
</ol>Horizontal List
Use list-group-horizontal class to change the layout of list group items from vertical to horizontal across all breakpoints.
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
<ul class="list-group list-group-horizontal-md mb-3">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Work</li>
<li class="list-group-item">Shopping</li>
</ul>
<ul class="list-group list-group-horizontal-md justify-content-center mb-3">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Work</li>
<li class="list-group-item">Shopping</li>
</ul>
<ul class="list-group list-group-horizontal-md justify-content-end">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Work</li>
<li class="list-group-item">Shopping</li>
</ul>Custom Content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
-
Pending
Charlie Pritchard
12 minutes ago
-
Charlie has just started a new project and is currently collecting feedback from the team. The initial responses have been positive, but some adjustments are still needed before the final review.
-
Pending
Dominic Charlton
15 minutes ago
-
Dominic is finalizing the details of his proposal and needs to address a few client concerns before submission. He’s been working late to ensure everything is perfect.
-
Rejected
Declan Long
1 hour ago
-
Declan's proposal was unfortunately rejected due to missing key details. He’s currently reviewing the feedback to improve and resubmit his proposal for reconsideration.
-
Successful
Angela Bernier
5 days ago
-
Angela’s project has been a resounding success. Her innovative approach and attention to detail impressed the client, leading to a contract extension and positive feedback.
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item list-group-header d-flex align-items-center gap-3">
<div class="flex-grow-1">
<h6 class="mb--1">Charlie Pritchard</h6>
<p class="mb-0 text-muted">12 minutes ago</p>
</div>
<span class="badge bg-primary flex-shrink-0 rounded-pill status-badge">Pending</span>
</li>
<li class="list-group-item list-group-item-content">
<div class="d-flex align-items-center gap-3">
<img src="assets/images/avatar/avatar-1.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
<p class="mb-0 flex-grow-1 text-muted">Charlie has just started a new project and is currently collecting feedback from the team. The initial responses have been positive, but some adjustments are still needed before the final review.</p>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item list-group-header d-flex align-items-center gap-3">
<div class="flex-grow-1">
<h6 class="mb--1">Dominic Charlton</h6>
<p class="mb-0 text-muted">15 minutes ago</p>
</div>
<span class="badge bg-primary rounded-pill status-badge flex-shrink-0">Pending</span>
</li>
<li class="list-group-item list-group-item-content">
<div class="d-flex align-items-center gap-3">
<img src="assets/images/avatar/avatar-2.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
<p class="mb-0 flex-grow-1 text-muted">Dominic is finalizing the details of his proposal and needs to address a few client concerns before submission. He’s been working late to ensure everything is perfect.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item list-group-header d-flex align-items-center gap-3 bg-light">
<div class="flex-grow-1">
<h6 class="mb--1">Declan Long</h6>
<p class="mb-0 text-muted">1 hour ago</p>
</div>
<span class="badge bg-danger rounded-pill status-badge flex-shrink-0">Rejected</span>
</li>
<li class="list-group-item list-group-item-content">
<div class="d-flex align-items-center gap-3">
<img src="assets/images/avatar/avatar-3.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
<p class="mb-0 flex-grow-1 text-muted">Declan's proposal was unfortunately rejected due to missing key details. He’s currently reviewing the feedback to improve and resubmit his proposal for reconsideration.</p>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item list-group-header d-flex align-items-center gap-3 bg-light">
<div class="flex-grow-1">
<h6 class="mb--1">Angela Bernier</h6>
<p class="mb-0 text-muted">5 days ago</p>
</div>
<span class="badge bg-success rounded-pill status-badge flex-shrink-0">Successful</span>
</li>
<li class="list-group-item list-group-item-content">
<div class="d-flex align-items-center gap-3">
<img src="assets/images/avatar/avatar-4.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
<p class="mb-0 flex-grow-1 text-muted">Angela’s project has been a resounding success. Her innovative approach and attention to detail impressed the client, leading to a contract extension and positive feedback.</p>
</div>
</li>
</ul>
</div>
</div>