Bootstrap 5 List group Contextual classes

Last Updated : 5 Dec, 2022

Bootstrap 5 List group Contextual classes are used to style list-group-items with different backgrounds and colors.

Bootstrap 5 List group Contextual Used Classes:

  • list-group-item-primary: For blue color styling of the list item
  • list-group-item-success: For green color styling of the list item
  • list-group-item-secondary: For grey color styling of the list item
  • list-group-item-danger: For red color styling of the list item
  • list-group-item-warning: For yellow color styling of the list item
  • list-group-item-light: For transparent color styling of the list item
  • list-group-item-dark: For grey color styling of the list item
  • list-group-item-dark: For simple display of list item

Syntax: This * can be substituted for any of the classes of above mentioned Classes

<ul class="list-group">
    <li class="list-group-item list-group-item-*">
        ...
    </li>
</ul>

Example 1: In this example, we will learn about the primary, success, and secondary classes of Bootstrap5.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 List group 
            Contextual classes
        </h2>
        <ul class="list-group">
            <li class="list-group-item">
                I am List Group Item - Default
            </li>
            <li class="list-group-item list-group-item-primary">
                I am List Group Item - Primary
            </li>
            <li class="list-group-item list-group-item-success">
                I am List Group Item - Success
            </li>
            <li class="list-group-item list-group-item-secondary">
                I am List Group Item - Secondary
            </li>
        </ul>
    </div>
</body>
</html>

Output:

 

Example 2: In this example, we will learn about the danger, warning, light, and dark classes of Bootstrap5.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 List group 
            Contextual classes
        </h2>
        <ul class="list-group">
            <li class="list-group-item list-group-item-danger">
                I am List Group Item - Danger
            </li>
            <li class="list-group-item list-group-item-warning">
                I am List Group Item - warning
            </li>
            <li class="list-group-item list-group-item-light">
                I am List Group Item - light
            </li>
            <li class="list-group-item list-group-item-dark">
                I am List Group Item - dark
            </li>
        </ul>
    </div>
</body>
</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#contextual-classes

Comment

Explore