Bootstrap Tutorial - Custom content for List group








Add nearly any HTML within, even for linked list groups like the one below.

Example

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   w w  w .  j  a  v  a  2 s  .com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">List group item heading</h4>
      <p class="list-group-item-text">Donec id elit non mi porta
        gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    </a> <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">List group item heading</h4>
      <p class="list-group-item-text">Donec id elit non mi porta
        gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    </a> <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">List group item heading</h4>
      <p class="list-group-item-text">Donec id elit non mi porta
        gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    </a>
  </div>

</body>
</html>

Click to view the demo