Bootstrap 3 - SPLessons

Bootstrap List Groups

Chapter 21

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap List Groups

Bootstrap List Groups

shape Description

To display the list items in an attractive manner, Bootstrap List Groups are used. A list group can be created in two steps.

  • To create a list group, one should add .list-group class to <ul>.
  • To attach list items to the list group, one should add list-group-itemclass to <li>.

shape Example

In the below example, list items(Aeroplanes, Cars, Bikes, Bicycles) are wrapped into a list-group.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of Bootstrap 3 List Groups</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<style type="text/css">
			.list-group{
				width: 200px;
			}
			.bs-example{
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="bs-example">
			<ul class="list-group">
				<li class="list-group-item">Aeroplanes</li>
				<li class="list-group-item">Cars</li>        
				<li class="list-group-item">Bikes</li>
				<li class="list-group-item">Bicycles</li>
			</ul>
		</div>
	</body>
</html>

Output:

Adding Badges

Badges component can be added to any list group item and is positioned on the right by default. To add badges, the class “badge” has to be placed within the <li> element.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of Bootstrap 3 List Groups</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<style type="text/css">
			.list-group{
				width: 200px;
			}
			.bs-example{
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class = "row" style = "margin-left:20px; margin-top:50px">
			<ul class = "list-group">

				   <li class = "list-group-item"><span class = "badge">3</span>Inbox</li>
				   <li class = "list-group-item"><span class = "badge">7</span>Sent Items</li>
				   <li class = "list-group-item"><span class = "badge">15</span>Drafts</li>
				
			</ul>
		</div>
	</body>
</html>

Output:

Linking items in List Group

shape Description

To link the list groups instead of list items, anchor tags are used <div> instead of <ul> elements.

shape Example

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of Bootstrap 3 List Groups</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="bs-example">
			<div class="list-group">
				<a href = "#" class = "list-group-item active">
				   Messages
				</a>

				<a href = "#" class = "list-group-item">Inbox</a>
				<a href = "#" class = "list-group-item">Sentbox</a>
				<a href = "#" class = "list-group-item">Drafts</a>
				<a href = "#" class = "list-group-item">Important</a>
			</div>
		</div>
	</body>
</html>

Output:

List Group with Contextual States

List group can use emphasis elements. These elements have to be placed inside <li>. Below example demonstrates List Groups with emphasis elements.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of Bootstrap 3 List Group Contextual Classes</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<style type="text/css">
			.bs-example{
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="bs-example">
			<ul class="list-group">
				<li class="list-group-item list-group-item-success">200 OK: The server has processed the request successfully.</li>
				<li class="list-group-item list-group-item-info">100 Continue: The client should continue with its request.</li>
				<li class="list-group-item list-group-item-warning">503 Service Unavailable: The server is temporarily unable to handle the request.</li>
				<li class="list-group-item list-group-item-danger">400 Bad Request: The request cannot be processed due to bad syntax.</li>
			</ul>
		</div>
	</body>
</html>                                		

Output:

Summary

shape Key Points

  • Bootstrap List Groups are unordered lists.
  • Badges are added using badge class in span class.
  • To link the list-group items, <div> element is used.
  • Emphasis elements in the list group are placed in <li> tag.