List Group

List groups are a powerful component that easily displays content in a list. There are many uses for list groups, which make them extremely flexible.

Default List Group

By default, these are full width. It is a basic unordered list ul with minimal styling. You can build upon this with the next few examples, or you can build upon it with your own CSS.

EXAMPLE

This is item one
This is item two
This is item three
This is item four
This is item five

<ul class="list-group">
  <li class="list-group-element">This is item one</li>
  <li class="list-group-element">This is item two</li>
  <li class="list-group-element">This is item three</li>
  <li class="list-group-element">This is item four</li>
  <li class="list-group-element">This is item five</li>
</ul>

Anchored List Groups

Replace your ul with a div and your li with a tags for better markup.

EXAMPLE

This is item one This is item two This is item three This is item four This is item five This is item six This is item seven

<div class="list-group">
  <a class="list-group-element active">This is item one</a>
  <a class="list-group-element">This is item two</a>
  <a class="list-group-element">This is item three</a>
  <a class="list-group-element">This is item four</a>
  <a class="list-group-element">This is item five</a>
</div>

No Border List Groups

Add the class no-b to the list-group to get a borderless list group.

EXAMPLE

This is item one This is item two This is item three This is item four This is item five This is item six This is item seven

<div class="list-group no-b">
  <a class="list-group-element active">This is item one</a>
  <a class="list-group-element">This is item two</a>
  <a class="list-group-element">This is item three</a>
  <a class="list-group-element">This is item four</a>
  <a class="list-group-element">This is item five</a>
</div>