<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Basic List Groups</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item">Basic List item-1</li>
<li class="list-group-item">Basic List item-2</li>
<li class="list-group-item">Basic List item-3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>List Group With Badges</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item">Images <span class="badge">50</span></li>
<li class="list-group-item">Songs <span class="badge">120</span></li>
<li class="list-group-item">Videos <span class="badge">36</span></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>List Group With Linked Items</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item">Linked item-1</a>
<a href="#" class="list-group-item">Linked item-2</a>
<a href="#" class="list-group-item">Linked item-3</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Active Lists and Disabled Lists</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<h4>Active List</h4>
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
<h4>Disabled List</h4>
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Contextual Classes</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Contextual Class "Success"</li>
<li class="list-group-item list-group-item-info">Contextual Class "Info"</li>
<li class="list-group-item list-group-item-warning">Contextual Class "Warning"</li>
<li class="list-group-item list-group-item-danger">Contextual Class "Danger"</li>
</ul>
</body>
</html>
Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.