Bootstrap List Groups

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Stylish List Groups

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s List Group classes to create organized, attractive lists for navigation or content display. We’ll pair list groups with images for a vibrant look.

What You’ll Learn

Creating a basic list group
Adding active and disabled states
Using list groups with links
Combining list groups with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap List Groups

Bootstrap List Groups use the list-group and list-group-item classes to style lists, making them ideal for menus, to-do lists, or content summaries. They support states, colors, and links for interactivity.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic List Group

Start with a simple list group to display items. Use this code:

<div class="container">
    <h3>Basic List Group</h3>
    <ul class="list-group">
        <li class="list-group-item">Task 1</li>
        <li class="list-group-item">Task 2</li>
        <li class="list-group-item">Task 3</li>
    </ul>
</div>

Explanation:

container: Centers and constrains content.
list-group: Styles the <ul> as a list group.
list-group-item: Formats each <li> with padding and borders.

This creates a clean, bordered list of items.

Step 3: Add Active and Disabled States

Highlight active items and disable others. Try this:

<div class="container">
    <h3>Active and Disabled List Group</h3>
    <ul class="list-group">
        <li class="list-group-item active">Current Item</li>
        <li class="list-group-item">Regular Item</li>
        <li class="list-group-item disabled">Unavailable Item</li>
    </ul>
</div>

Explanation:

active: Highlights “Current Item” with a blue background.
disabled: Grays out “Unavailable Item” and reduces interactivity.
list-group-item: Maintains consistent styling.

This shows the state of items in the list.

Step 4: Use List Groups with Links

Make the list group clickable by using <a> tags. Add this:

<div class="container">
    <h3>Linked List Group</h3>
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Profile</a>
        <a href="#" class="list-group-item list-group-item-action active">Settings</a>
        <a href="#" class="list-group-item list-group-item-action">Logout</a>
    </div>

Explanation:

list-group on div: Supports <a> tags instead of <ul>.
list-group-item list-group-item-action: Styles links with hover effects.
active: Highlights the current link (Settings).

This creates a clickable navigation list.

Step 5: Combine with an Image

Pair a list group with a dummy image for a richer layout. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Task List</h3>
            <p>Manage your tasks below.</p>
            <ul class="list-group">
                <li class="list-group-item">Write report</li>
                <li class="list-group-item active">Review code</li>
                <li class="list-group-item">Schedule meeting</li>
            </ul>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into list/text (8 units) and image (4 units).
list-group with active: Highlights the current task.
Uses a 200×150 green image for vibrancy.

The image enhances the list’s context.

Final Code

Here’s a combined example with varied list groups and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple List Group</h3>
            <ul class="list-group">
                <li class="list-group-item">Item 1</li>
                <li class="list-group-item">Item 2</li>
                <li class="list-group-item">Item 3</li>
            </ul>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Navigation List</h3>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">Home</a>
                <a href="#" class="list-group-item list-group-item-action active">Dashboard</a>
                <a href="#" class="list-group-item list-group-item-action disabled">Reports</a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Tasks</h3>
            <p>Track your progress.</p>
            <ul class="list-group">
                <li class="list-group-item">Design UI</li>
                <li class="list-group-item active">Test API</li>
                <li class="list-group-item">Deploy app</li>
            </ul>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with a simple list group (Item 1, Item 2, Item 3).
A row with a clickable navigation list (Home, Dashboard active, Reports disabled).
A two-column section with a list group (Design UI, Test API active, Deploy app), text, and a red image (250×150).
All list groups are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap List Groups Docs for more options.
Try list-group-flush for borderless lists.
Combine with Bootstrap badges for notifications.

Conclusion

You’ve mastered Bootstrap List Groups! With classes like list-group, list-group-item, and list-group-item-action, plus striking images, you’ve created organized, stylish lists. Keep experimenting to enhance your webpages.