CodeLab
Show Output
 
xxxxxxxxxx
38
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1">
7
<title>Example of Bootstrap 3 Linked List Groups</title>
8
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
11
<style type="text/css">
12
    .list-group{
13
        width: 200px;
14
    }
15
    .bs-example{
16
        margin: 20px;
17
    }
18
</style>
19
</head>
20
<body>
21
<div class="bs-example">
22
    <div class="list-group">
23
        <a href="#" class="list-group-item active">
24
            <span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
25
        </a>
26
        <a href="#" class="list-group-item">
27
            <span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>
28
        </a>
29
        <a href="#" class="list-group-item">
30
            <span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>
31
        </a>
32
        <a href="#" class="list-group-item">
33
            <span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>
34
        </a>
35
    </div>
36
</div>
37
</body>
38
</html>
 
Switch to SQL Mode

Share this example with Facebook, Twitter, Gmail. Please give us a Like, if you find it helpful.