List group is a useful component for creating lists.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!-- ww w .ja va2s .c o m-->
<body style='margin:30px'>
<ul class="list-group">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Sent</li>
<li class="list-group-item">Drafts</li>
<li class="list-group-item">Deleted</li>
<li class="list-group-item">Spam</li>
</ul>
</body>
</html>
The following code adds badge to list group.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from www . j av a 2 s .c om-->
<body style='margin:30px'>
<div class="row">
<div class="col-xs-3">
<ul class="list-group">
<li class="list-group-item">Inbox <span class="badge">14</span></li>
<li class="list-group-item">Sent <span class="badge">4</span></li>
<li class="list-group-item">Drafts <span class="badge">7</span></li>
<li class="list-group-item">Deleted <span class="badge">24</span></li>
<li class="list-group-item">Spam <span class="badge">134</span></li>
</ul>
</div>
</div>
</body>
</html>
When you want to display a list of links, you should use the anchor element a
instead of list elements li
, use a parent div
,
instead of a ul
.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from ww w . j a v a 2s. c o m-->
<body style='margin:30px'>
<div class="row">
<div class="col-xs-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
</div>
</div>
</div>
</body>
</html>