Bootstrap

About Lesson

Basic List Groups

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

You can create basic list group by using <ul> element with class .list-group , and <li> element with class .list-group-item.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <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>
</div>

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

Output:

Active State

You can use class .active to highlight the current item.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Active List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>List Group with Active State</h3>
    <ul class="list-group">
        <li class="list-group-item active" aria-current="true">Active Item</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
    </ul>
</div>

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

Output:

List Group With Linked Items

Use <div> and <a> tag instead of <ul> and <li> to create a list of group with linked items.

If you want a grey background on hover then, you can use class .list-group-item-action .

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap List Group with Links</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>List Group with Linked Items</h3>

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Active Link</a>
        <a href="#" class="list-group-item list-group-item-action">Item 2</a>
        <a href="#" class="list-group-item list-group-item-action">Item 3</a>
        <a href="#" class="list-group-item list-group-item-action">Item 4</a>
        <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Disabled Item</a>
    </div>
</div>

Output:

Disabled Items

You can use .disabled class to disable items. It will lighter text color and it will remove hover effect on links.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Disabled List Items</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>List Group with Disabled Items</h3>

    <!-- Disabled item in a normal list group -->
    <ul class="list-group">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item disabled" aria-disabled="true">Disabled Item</li>
        <li class="list-group-item">Item 3</li>
    </ul>

    <h3 class="mt-4">List Group with Disabled Links</h3>

    <!-- Disabled item in a list group with links -->
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Active Link</a>
        <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true" tabindex="-1">Disabled Link</a>
        <a href="#" class="list-group-item list-group-item-action">Item 3</a>
    </div>
</div>

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

Output:

Flush / Remove Borders

To remove some borders or rounded corners, You can use .list-group-flush class.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Flush List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>Flush List Group (Borderless)</h3>

    <ul class="list-group list-group-flush">
        <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>

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

Output:

Numbered List Groups

You can use .list-group-numbered class to create list along with numbers in front of them.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Numbered List Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>Numbered List Group</h3>

    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
    </ol>
</div>

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

Output:

Horizontal List Groups

If you want list horizontally instead of vertically. You can add the .list-group-horizontal class to .list-group.

Example:

HTML

<div class="container mt-4">
    <h3>Horizontal List Group</h3>

    <ul class="list-group list-group-horizontal">
        <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>

Output:

Contextual Classes

You can add color to list items by using Contextual Classes.

Example:

HTML

    <ul class="list-group">
        <li class="list-group-item list-group-item-primary">Primary Item</li>
        <li class="list-group-item list-group-item-secondary">Secondary Item</li>
        <li class="list-group-item list-group-item-success">Success Item</li>
        <li class="list-group-item list-group-item-danger">Danger Item</li>
        <li class="list-group-item list-group-item-warning">Warning Item</li>
        <li class="list-group-item list-group-item-info">Info Item</li>
        <li class="list-group-item list-group-item-light">Light Item</li>
        <li class="list-group-item list-group-item-dark">Dark Item</li>
    </ul>

Output:

Link items with Contextual Classes

The .list-group-item-action class will dark the color on hover.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Link Items with Contextual Classes</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>List Group with Linked Items & Contextual Classes</h3>

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light Link</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark Link</a>
    </div>
</div>

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

List Group with Badges

Combine .badge classes with utility/helper classes to add badges inside the list group.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap List Group with Badges</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h3>List Group with Badges</h3>

    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Inbox
            <span class="badge bg-primary rounded-pill">4</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Notifications
            <span class="badge bg-success rounded-pill">12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Messages
            <span class="badge bg-danger rounded-pill">8</span>
        </li>
    </ul>
</div>

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

Basic List Groups

Example:

Output:

Active State

Example:

Output:

List Group With Linked Items

Example:

Output:

Disabled Items

Example:

Output:

Flush / Remove Borders

Example:

Output:

Numbered List Groups

Example:

Output:

Horizontal List Groups

Example:

Output:

Contextual Classes

Example:

Output:

Link items with Contextual Classes

Example:

List Group with Badges

Example:

Output:

Computer Courses

Pages