Bootstrap 5 List group Contextual classes

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.

Output:

👁 Image

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

Output:

👁 Image

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