Articles → BOOTSTRAP → Contextual Classes For Lists In Bootstrap

Contextual Classes For Lists In Bootstrap






What Are Contextual Classes?


  1. list-group-item-success
  2. list-group-item-secondary
  3. list-group-item-info
  4. list-group-item-warning
  5. list-group-item-danger
  6. list-group-item-primary
  7. list-group-item-dark
  8. 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


Picture showing the output of the contextual classes for lists in bootstrap

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Wednesday, November 14, 2018

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250