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>.
Example
In the below example, list items(Aeroplanes, Cars, Bikes, Bicycles) are wrapped into a list-group.
[html]
<!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>
[/html]
Output:
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.
[html]<!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>[/html]
Output:
Description
To link the list groups instead of list items, anchor tags are used <div> instead of <ul> elements.
Example
[html]
<!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>
[/html]
Output:
List group can use emphasis elements. These elements have to be placed inside <li>. Below example demonstrates List Groups with emphasis elements.
[html]
<!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>
[/html]
Output:
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.