Bootstrap 5 List group Contextual classes

Last Updated : 05 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>