List Group
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.
Basic list
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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Basic List -->
<ul class="list-group">
<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>
Active Item
Add .active
to a .list-group-item
to indicate the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Active Item -->
<ul class="list-group">
<li class="list-group-item active">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>
Disabled Items
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).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Disabled items -->
<ul class="list-group">
<li class="list-group-item disabled">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>
<!-- link and buttons -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<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">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
With <button>
s, you can also make use of the disabled
attribute instead of the .disabled
class. Sadly, <a>
s don’t support the disabled attribute.
<!-- link and buttons -->
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
Flush
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).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Flush list -->
<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>
Numbered
Add the .list-group-numbered
modifier class (and optionally use an <ol>
element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>
s default browser styling) for better placement inside list group items and to allow for better customization.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<!-- numbered -->
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
These work great with custom content as well.
-
SubheadingCras justo odio
-
SubheadingCras justo odio
-
SubheadingCras justo odio
<!-- numbered with content -->
<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">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</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">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</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">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Horizontal
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
.
Currently horizontal
list groups cannot be combined with flush list groups.
ProTip: Want equal-width list group items when horizontal? Add .flex-fill
to each list group item.
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
<!-- Horizontal -->
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Checkboxes and radios
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.
- First checkbox
- Second checkbox
- Third checkbox
- Fourth checkbox
- Fifth checkbox
<!-- Checkbox and radio -->
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
Contextual classes
Use contextual classes to style list items with a stateful background and color.
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
<!-- Contextual classes -->
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
<li class="list-group-item list-group-item-info">This is a info list group item</li>
<li class="list-group-item list-group-item-light">This is a light list group item</li>
<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>
With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
<!-- with badges -->
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge bg-primary ">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge bg-primary ">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge bg-primary ">1</span>
</li>
</ul>
Custom content
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. <!-- custom content -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">List group item heading</h4>
<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">
<h4 class="mb-1">List group item heading</h4>
<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">
<h4 class="mb-1">List group item heading</h4>
<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>
</div>
List Group with Icon
What’s included
- 12 hours video
- Certificate
- 12 Article
- Watch Offline
- Lifetime access
<!-- List with icon -->
<div class="row">
<div class="col-xl-4 col-lg-4 col-12-6 col-12">
<div class="card mb-4">
<div class="">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">What’s included</h4>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent"><i class="fe fe-play-circle align-middle me-2 text-primary"></i>12 hours video</li>
<li class="list-group-item bg-transparent"><i class="fe fe-award me-2 align-middle text-success"></i>Certificate</li>
<li class="list-group-item bg-transparent"><i class="fe fe-calendar align-middle me-2 text-info"></i>12 Article</li>
<li class="list-group-item bg-transparent"><i class="fe fe-video align-middle me-2 text-secondary"></i>Watch Offline</li>
<li class="list-group-item bg-transparent border-bottom-0"><i class="fe fe-clock align-middle me-2 text-warning"></i>Lifetime access</li>
</ul>
</div>
</div>
</div>
</div>
List with Data
Post Info
- Post ID
8693637308
- Status
Published (unsaved changes)
- Created by
Geeks Courses
Admin - Created at
Jul 30, 2:21 PM
- First published
at
Jul 30, 2:21 PM
- Last update
Aug 31, 12:21 PM
- Last Published
Aug 31, 12:21 PM
<!-- card -->
<div class="card mt-4 mt-lg-0 mb-4">
<!-- Card Header -->
<div class="card-header d-lg-flex">
<h4 class="mb-0">
Post Info
</h4>
</div>
<!-- List Group -->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span>Post ID</span>
<h5 class="">8693637308</h5>
</li>
<li class="list-group-item">
<span>Status</span>
<h5 class=""><span class="badge-dot bg-success d-inline-block me-1"></span>Published
(unsaved changes)
</h5>
</li>
<li class="list-group-item">
<span>Created by</span>
<div class="d-flex mt-2">
<img src="../assets/images/avatar/avatar-1.jpg" alt="" class="avatar-sm rounded-circle">
<div class="ms-2">
<h5 class="mb-n1">Geeks Courses</h5>
<small>Admin</small>
</div>
</div>
</li>
<li class="list-group-item">
<span>Created at</span>
<h5 class="">Jul 30, 2:21 PM</h5>
</li>
<li class="list-group-item">
<span>First published at</span>
<h5 class="">Jul 30, 2:21 PM</h5>
</li>
<li class="list-group-item">
<span>Last update</span>
<h5 class="">Aug 31, 12:21 PM</h5>
</li>
<li class="list-group-item">
<span>Last Published</span>
<h5 class="">Aug 31, 12:21 PM</h5>
</li>
</ul>
<!-- Card --></div>