Bootstrap List Design
Make information easier to explore. Learn to design structured, responsive list groups with active states, badges, numbered items, and interactive selections.
<ul class="list-group"> <li class="list-group-item active"> Dashboard </li> </ul>
What Is Bootstrap List Design?
Lists help organize related information. You might use them for notifications, tasks, messages, product categories, or navigation options.
Bootstrap’s list group component transforms simple HTML lists into attractive, structured interface elements without requiring custom styling for every item.
Create Your First List Group
Start with an unordered list using
list-group. Give each list item
the list-group-item class.
<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">Bootstrap</li>
</ul>list-group
Creates the styled container for related list items.
list-group-item
Styles each individual row inside the group.
Bootstrap handles the borders, spacing, backgrounds, and rounded corners for you.
Highlight Important Items
The active class highlights a selected
or current item. Use aria-current="true"
when the item represents the current selection.
<ul class="list-group">
<li class="list-group-item active"
aria-current="true">
Current Lesson
</li>
<li class="list-group-item">Next Lesson</li>
<li class="list-group-item disabled"
aria-disabled="true">
Coming Soon
</li>
</ul>disabled
class changes appearance but does not automatically
prevent every type of interaction. Use the native
disabled attribute on buttons and
remove navigation behavior from unavailable links.
Add Contextual List Colors
Bootstrap provides contextual list classes to communicate different meanings. For example, green can represent success and yellow can highlight a warning.
<ul class="list-group">
<li class="list-group-item list-group-item-success">
Task Completed
</li>
<li class="list-group-item list-group-item-warning">
Needs Review
</li>
<li class="list-group-item list-group-item-danger">
Action Required
</li>
</ul>
Other contextual options include
list-group-item-primary,
list-group-item-info, and
list-group-item-secondary.
Show Counts with Badges
Badges are useful for displaying small pieces of information, such as unread messages, notification counts, or task totals.
<ul class="list-group">
<li class="list-group-item
d-flex justify-content-between align-items-center">
New Messages
<span class="badge text-bg-primary rounded-pill">
12
</span>
</li>
</ul>badgeStyles the small information label.rounded-pillCreates a rounded, pill-shaped badge.d-flexTurns the list item into a flex container.justify-content-betweenSeparates the item label from its badge.Create Numbered List Groups
Sometimes order matters. Bootstrap can automatically
number list-group items using
list-group-numbered.
<ol class="list-group list-group-numbered">
<li class="list-group-item">Plan the project</li>
<li class="list-group-item">Build the layout</li>
<li class="list-group-item">Test the website</li>
</ol>Use a numbered list when the sequence matters, such as instructions, project milestones, or steps in a process.
Make List Items Clickable
Bootstrap supports interactive list groups
with list-group-item-action.
Use links when an item navigates somewhere,
or buttons when it performs an action.
<div class="list-group">
<button type="button"
class="list-group-item list-group-item-action active"
aria-current="true">
Overview
</button>
<button type="button"
class="list-group-item list-group-item-action">
Project Details
</button>
</div>
The action class adds hover and focus styles.
To change which item is active after a click,
you’ll need JavaScript or Bootstrap’s
list-group tab functionality.
<ul> and
<li>. A list of clickable actions
can use buttons inside a <div>.
Choose the HTML structure that matches its purpose.
Remove Borders or Arrange Items Horizontally
Bootstrap also provides variations for different
page layouts. Use list-group-flush
to remove the outer borders and rounded corners,
or list-group-horizontal to place
items side by side.
<ul class="list-group list-group-flush">
<li class="list-group-item">First</li>
<li class="list-group-item">Second</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
</ul>
For responsive horizontal lists, you can use
list-group-horizontal-md so the
items stack on smaller screens and become
horizontal at the medium breakpoint.
🚀 mC0de Challenge
Build a Project Task List
Imagine you’re creating a project management dashboard. Your task is to design a list that clearly shows what needs attention.
Your mission: Complete all five tasks in the Sandbox below.
Use the checklist to review your work, then compare your result with the sample solution.
mC0de Bootstrap Sandbox
Design your list, run the code, and click different tasks to test selection.
What You’ve Learned
list-groupcreates a Bootstrap list container.list-group-itemstyles individual items.activehighlights the current selection.disabledstyles unavailable items; native disabled buttons prevent interaction.- Contextual classes such as
list-group-item-successcommunicate status. - Badges display compact information such as counts or labels.
list-group-numberedcreates automatically numbered lists.list-group-item-actionadds interactive hover and focus styling.list-group-flushand horizontal utilities customize layout.
Up next: We'll learn Bootstrap Table Design, including striped rows, borders, hover effects, and responsive tables.
Your Learning Journey
0 of 7 completedNice Work! 🎉
You've learned how to design Bootstrap list groups, highlight active items, display badges, and create interactive task lists. Ready to record your progress?