Lists
Lists are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Unstyled
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Dashboard
- Profile
-
Account
- Settings
- Billing
- Invoice
- Projects
-
Tasks
- One
- Two
- Three
<!-- List -->
<ul class="list-unstyled">
<li>Dashboard</li>
<li>Profile</li>
<li>
Account
<ul>
<li>Settings</li>
<li>Billing</li>
<li>Invoice</li>
</ul>
</li>
<li>Projects</li>
<li>
Tasks
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
</ul>
<!-- End List -->
Unstyled spacings
You can add vertical spacings between lists with modifier classes.
Use .list-py-1 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-unstyled list-py-1">
<li>Dashboard</li>
<li>Profile</li>
<li>Account</li>
<li>Projects</li>
<li>Tasks</li>
</ul>
<!-- End List -->
Use .list-py-2 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-unstyled list-py-2">
<li>Dashboard</li>
<li>Profile</li>
<li>Account</li>
<li>Projects</li>
<li>Tasks</li>
</ul>
<!-- End List -->
Use .list-py-3 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-unstyled list-py-3">
<li>Dashboard</li>
<li>Profile</li>
<li>Account</li>
<li>Projects</li>
<li>Tasks</li>
</ul>
<!-- End List -->
Horizontal spacings
You can add horizontal spacings between lists with modifier classes.
Use .list-px-1 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-inline list-px-1">
<li class="list-inline-item">Dashboard</li>
<li class="list-inline-item">Profile</li>
<li class="list-inline-item">Account</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">Tasks</li>
</ul>
<!-- End List -->
Use .list-px-2 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-inline list-px-2">
<li class="list-inline-item">Dashboard</li>
<li class="list-inline-item">Profile</li>
<li class="list-inline-item">Account</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">Tasks</li>
</ul>
<!-- End List -->
Use .list-px-3 class.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-inline list-px-3">
<li class="list-inline-item">Dashboard</li>
<li class="list-inline-item">Profile</li>
<li class="list-inline-item">Account</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">Tasks</li>
</ul>
<!-- End List -->
Inline
Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
- Dashboard
- Profile
- Account
- Projects
- Tasks
<!-- List -->
<ul class="list-inline">
<li class="list-inline-item">Dashboard</li>
<li class="list-inline-item">Profile</li>
<li class="list-inline-item">Account</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">Tasks</li>
</ul>
<!-- End List -->
List separator
Use .list-separator class with the .list-inline class for an inline separator with a circled shape.
<!-- List Separator -->
<ul class="list-inline list-separator">
<li class="list-inline-item">
<a class="list-separator-link" href="#">FAQ</a>
</li>
<li class="list-inline-item">
<a class="list-separator-link" href="#">License</a>
</li>
<li class="list-inline-item">
<a class="list-separator-link" href="#">Terms & conditions</a>
</li>
</ul>
<!-- End List Separator -->
Use .list-separator-light for a light version in a dark background.
<!-- List Separator -->
<ul class="list-inline list-separator list-separator-light">
<li class="list-inline-item">
<a class="list-separator-link" href="#">FAQ</a>
</li>
<li class="list-inline-item">
<a class="list-separator-link" href="#">License</a>
</li>
<li class="list-inline-item">
<a class="list-separator-link" href="#">Terms & conditions</a>
</li>
</ul>
<!-- End List Separator -->
List comment
Use .list-comment class and .list-comment-item as a child class for a comment style listing.
-
Dave Austin
1 day agoAs a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.
Reply-
Christina Kray
1 day agoLove it Dave! We're all about keeping it up.
Reply
-
-
Hanna Wolfe
2 days agoSince our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.
Reply
<!-- Comment -->
<ul class="list-comment">
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Dave Austin</h6>
<span class="d-block">1 day ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
<a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
<!-- Comment -->
<ul class="list-comment">
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Christina Kray</h6>
<span class="d-block">1 day ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>Love it Dave! We're all about keeping it up.</p>
<a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</li>
<!-- End Item -->
</ul>
<!-- End Comment -->
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Hanna Wolfe</h6>
<span class="d-block">2 days ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>
<a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</li>
<!-- End Item -->
</ul>
<!-- End Comment -->
List checked
Replacing the default list-style and left margin on list items with 3 different styles of checkboxes.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-soft-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
</div>
<!-- End Row -->
List checked Sizings
Use .list-checked-sm class.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-sm list-checked-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-sm list-checked-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-sm list-checked-soft-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
</div>
<!-- End Row -->
Use .list-checked-lg class.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-lg list-checked-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-lg list-checked-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-lg list-checked-soft-bg-primary">
<li class="list-checked-item">Dashboard</li>
<li class="list-checked-item">Profile</li>
<li class="list-checked-item">Tasks</li>
<li class="list-checked-item">Projects</li>
<li class="list-checked-item">Members</li>
</ul>
<!-- End List Checked -->
</div>
</div>
<!-- End Row -->
Color variations
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
<div class="row">
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Primary</li>
</ul>
<ul class="list-checked list-checked-secondary">
<li class="list-checked-item">Secondary</li>
</ul>
<ul class="list-checked list-checked-success">
<li class="list-checked-item">Success</li>
</ul>
<ul class="list-checked list-checked-danger">
<li class="list-checked-item">Danger</li>
</ul>
<ul class="list-checked list-checked-warning">
<li class="list-checked-item">Warning</li>
</ul>
<ul class="list-checked list-checked-info">
<li class="list-checked-item">Info</li>
</ul>
<ul class="list-checked list-checked-light">
<li class="list-checked-item">Light</li>
</ul>
<ul class="list-checked list-checked-dark">
<li class="list-checked-item">Dark</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-bg-primary">
<li class="list-checked-item">Primary</li>
</ul>
<ul class="list-checked list-checked-bg-secondary">
<li class="list-checked-item">Secondary</li>
</ul>
<ul class="list-checked list-checked-bg-success">
<li class="list-checked-item">Success</li>
</ul>
<ul class="list-checked list-checked-bg-danger">
<li class="list-checked-item">Danger</li>
</ul>
<ul class="list-checked list-checked-bg-warning">
<li class="list-checked-item">Warning</li>
</ul>
<ul class="list-checked list-checked-bg-info">
<li class="list-checked-item">Info</li>
</ul>
<ul class="list-checked list-checked-bg-light">
<li class="list-checked-item">Light</li>
</ul>
<ul class="list-checked list-checked-bg-dark">
<li class="list-checked-item">Dark</li>
</ul>
<!-- End List Checked -->
</div>
<div class="col-sm">
<!-- List Checked -->
<ul class="list-checked list-checked-soft-bg-primary">
<li class="list-checked-item">Primary</li>
</ul>
<ul class="list-checked list-checked-soft-bg-secondary">
<li class="list-checked-item">Secondary</li>
</ul>
<ul class="list-checked list-checked-soft-bg-success">
<li class="list-checked-item">Success</li>
</ul>
<ul class="list-checked list-checked-soft-bg-danger">
<li class="list-checked-item">Danger</li>
</ul>
<ul class="list-checked list-checked-soft-bg-warning">
<li class="list-checked-item">Warning</li>
</ul>
<ul class="list-checked list-checked-soft-bg-info">
<li class="list-checked-item">Info</li>
</ul>
<ul class="list-checked list-checked-soft-bg-light">
<li class="list-checked-item">Light</li>
</ul>
<ul class="list-checked list-checked-soft-bg-dark">
<li class="list-checked-item">Dark</li>
</ul>
<!-- End List Checked -->
</div>
</div>
<!-- End Row -->
List pointer
Replacing the default list-style and left margin on list items with 3 different styles of checkboxes.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-soft-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
</div>
<!-- End Row -->
List pointer Sizings
Use .list-pointer-sm class.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-sm list-pointer-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-sm list-pointer-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-sm list-pointer-soft-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
</div>
<!-- End Row -->
Use .list-pointer-lg class.
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
- Dashboard
- Profile
- Tasks
- Projects
- Members
<div class="row">
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-lg list-pointer-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-lg list-pointer-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-lg list-pointer-soft-bg-primary">
<li class="list-pointer-item">Dashboard</li>
<li class="list-pointer-item">Profile</li>
<li class="list-pointer-item">Tasks</li>
<li class="list-pointer-item">Projects</li>
<li class="list-pointer-item">Members</li>
</ul>
<!-- End List Pointer -->
</div>
</div>
<!-- End Row -->
Color variations
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
<div class="row">
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-primary">
<li class="list-pointer-item">Primary</li>
</ul>
<ul class="list-pointer list-pointer-secondary">
<li class="list-pointer-item">Secondary</li>
</ul>
<ul class="list-pointer list-pointer-success">
<li class="list-pointer-item">Success</li>
</ul>
<ul class="list-pointer list-pointer-danger">
<li class="list-pointer-item">Danger</li>
</ul>
<ul class="list-pointer list-pointer-warning">
<li class="list-pointer-item">Warning</li>
</ul>
<ul class="list-pointer list-pointer-info">
<li class="list-pointer-item">Info</li>
</ul>
<ul class="list-pointer list-pointer-light">
<li class="list-pointer-item">Light</li>
</ul>
<ul class="list-pointer list-pointer-dark">
<li class="list-pointer-item">Dark</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-bg-primary">
<li class="list-pointer-item">Primary</li>
</ul>
<ul class="list-pointer list-pointer-bg-secondary">
<li class="list-pointer-item">Secondary</li>
</ul>
<ul class="list-pointer list-pointer-bg-success">
<li class="list-pointer-item">Success</li>
</ul>
<ul class="list-pointer list-pointer-bg-danger">
<li class="list-pointer-item">Danger</li>
</ul>
<ul class="list-pointer list-pointer-bg-warning">
<li class="list-pointer-item">Warning</li>
</ul>
<ul class="list-pointer list-pointer-bg-info">
<li class="list-pointer-item">Info</li>
</ul>
<ul class="list-pointer list-pointer-bg-light">
<li class="list-pointer-item">Light</li>
</ul>
<ul class="list-pointer list-pointer-bg-dark">
<li class="list-pointer-item">Dark</li>
</ul>
<!-- End List Pointer -->
</div>
<div class="col-sm">
<!-- List Pointer -->
<ul class="list-pointer list-pointer-soft-bg-primary">
<li class="list-pointer-item">Primary</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-secondary">
<li class="list-pointer-item">Secondary</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-success">
<li class="list-pointer-item">Success</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-danger">
<li class="list-pointer-item">Danger</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-warning">
<li class="list-pointer-item">Warning</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-info">
<li class="list-pointer-item">Info</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-light">
<li class="list-pointer-item">Light</li>
</ul>
<ul class="list-pointer list-pointer-soft-bg-dark">
<li class="list-pointer-item">Dark</li>
</ul>
<!-- End List Pointer -->
</div>
</div>
<!-- End Row -->