Prev Next

BS5 List Groups

Bootstrap 5 List Groups are used to display a series of content items in a flexible and stylish way. They support text, badges, links, and custom content.

Key Topics

Basic List Groups

Create a list group using the .list-group class with nested .list-group-item elements.

<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>

Explanation: The .list-group class defines the container, while .list-group-item styles individual items.

Use <a> or <button> elements with the .list-group-item class to make interactive list groups.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Clickable Item 1</a>
    <a href="#" class="list-group-item list-group-item-action">Clickable Item 2</a>
</div>

Explanation: Adding .list-group-item-action makes items hoverable and clickable.

List Groups with Badges

Add .badge elements to list items for displaying counts or labels.

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Item 1
        <span class="badge bg-primary rounded-pill">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Item 2
        <span class="badge bg-success rounded-pill">10</span>
    </li>
</ul>

Explanation: Use utility classes like .d-flex and .justify-content-between for better badge placement.

Complete List Group Example

Below is a complete example demonstrating various types of list groups.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 List Groups Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap List Groups</h2>

        <h3>Basic 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>

        <h3>Clickable List Group</h3>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">Clickable Item 1</a>
            <a href="#" class="list-group-item list-group-item-action">Clickable Item 2</a>
        </div>

        <h3>List Group with Badges</h3>
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Item 1
                <span class="badge bg-primary rounded-pill">4</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Item 2
                <span class="badge bg-success rounded-pill">10</span>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines basic, interactive, and badge-enhanced list groups for a comprehensive demonstration.

Key Takeaways

  • Use .list-group for the container and .list-group-item for items.
  • Add .list-group-item-action to make list items clickable.
  • Combine badges and utility classes for dynamic list group layouts.
Prev Next