List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

								
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
								
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
								
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
	The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>
The current link item A second link item A third link item A fourth link item A disabled link item 
								
<ul class="simple-list colored-list">
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
</ul>
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.
								
<ul class="simple-list">
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
	<li>Hello Item second is there.</li>
</ul>
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.
  • Hello Item second is there.

Already working together?

log in to your account and connect with your teammates!.