Add a link to a list group
By using anchor tags instead of list items, we can add links to list groups. We need to use <div> instead of <ul> elements. The following example demonstrates this:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>bootstrap Experience Example: Add a link to a list group </title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<body>
<div style= "padding:20px" >
<ul class= "List-group" >
<li class= "List-group-item" >Html5</li>
<li class= "List-group-item" >Css3</li>
<li class= "List-group-item" >Bootstrap</li>
<li class= "List-group-item" >Javascript</li>
<li class= "List-group-item" >jQuery</li>
</ul>
<div class= "List-group" >
<a href= "#" class= "List-group-item" >Html5</a>
<a href= "#" class= "List-group-item" >Css3</a>
<a href= "#" class= "List-group-item" >Bootstrap</a>
<a href= "#" class= "List-group-item" >Javascript</a>
<a href= "#" class= "List-group-item" >jQuery</a>
</div>
<ul class= "List-group" >
<li class= "List-group-item" ><a href= "#" >Html5</a></li>
<li class= "List-group-item" ><a href= "#" >Css3</a></li>
<li class= "List-group-item" ><a href= "#" >Bootstrap</a></li>
<li class= "List-group-item" ><a href= "#" >Javascript</a></li>
<li class= "List-group-item" ><a href= "#" >jQuery</a></li>
</ul>
</div>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
</body>
Bootstrap experience Example: adding a link to a list group