The example of using list contextual classes

Bootstrap 4 Code

Output

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

</head>
<body>
<div class="container">
<h3>A Demo of Bootstrap List Group</h3>
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">JavaScript</li>
  <li class="list-group-item list-group-item-danger active">Bootstrap</li>
  <li class="list-group-item list-group-item-success">HTML</li>
  <li class="list-group-item list-group-item-info">CSS</li>
  <li class="list-group-item list-group-item-secondary">Angular JS</li>
  <li class="list-group-item list-group-item-warning">CSS 3</li>
  <li class="list-group-item list-group-item-dark">HTML 5</li>
  <li class="list-group-item list-group-item-light">React JS</li>
</ul>
</div>

</body>
</html>

A Demo of Bootstrap List Group

JavaScript
Bootstrap
HTML
CSS
Angular JS
CSS 3
HTML 5
React JS