Bootstrap List Groups

Creating List Groups with Bootstrap

The list groups are used to represents the lists of elements in meaningful way. Bootstrap provide .list-group-item class for grouping to list.    

<ul class="list-group">
    <li class="list-group-item">File</li>
    <li class="list-group-item">Article</li>
    <li class="list-group-item">Authors</li>
</ul>

Output

List Group with Linked Items

You can also hyperlink list group items with the little change in HTML markup.

<div class="list-group">
  <a href="#" class="list-group-item active">
  <span class="glyphicon glyphicon-file"></span> File <span class="badge">07</span>
  </a>
  <a href="#" class="list-group-item">
  <span class="glyphicon glyphicon-download"></span> Download <span class="badge">17</span>
  </a>
  <a href="#" class="list-group-item">
  <span class="glyphicon glyphicon-upload"></span> Upload <span class="badge">38</span>
  </a>
</div>

Output

List Group with Contextual States

<ul class="list-group">
    <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-info">info</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
    <li class="list-group-item list-group-item-danger">Danger</li>
</ul>

Output