Bootstrap Tutorial - Bootstrap List Group








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>

Click to view the demo





Example 2

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>

Click to view the demo





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>

Click to view the demo