Articles → BOOTSTRAP → Contextual Classes For Lists In Bootstrap
Contextual Classes For Lists In Bootstrap
What Are Contextual Classes?
- 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
- list-group-item-light
Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<title></title>
</head>
<body>
<div id="content">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
</div>
</body>
</html>
Output
Click to Enlarge