Contextual Classes

It is used to set the color to the list of items. The classes for coloring the list-items are: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark and .list-group-item-light.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body class="text-center">
    <div class="container mt-3">
        <h1 class="text-success">
            w3wiki
        </h1>
        <ul class="list-group">
            <li class="list-group-item
                        list-group-item-primary">
                Web
            </li>
            <li class="list-group-item
                        list-group-item-secondary">
                Android
            </li>
            <li class="list-group-item
                        list-group-item-success">
                AI
            </li>
            <li class="list-group-item
                        list-group-item-warning">
                Data Science
            </li>
            <li class="list-group-item
                        list-group-item-danger">
                UI/UX
            </li>
        </ul>
    </div>
</body>
</html>

Output:

Bootstrap 5 List group

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.

Syntax:

<div class="list-group"> Contents... <div>

Table of Content

Bootstrap 5 List group
Active list item
List Group With Linked Items
Disabled Item
Flush/Remove Borders
Horizontal List Groups
Contextual Classes
Link items with Contextual Classes
List Group with Badges

Contextual Classes

Bootstrap 5 List group

Similar Reads