<!-- Unstyled list -->
	<ul class="list-group">
		<li class="list-group-item"><a href="#">List group item</a></li>
		<li class="list-group-item"><a href="#">List group item</a></li>
		<li class="list-group-item"><a href="#">List group item</a></li>
		<li class="list-group-item"><a href="#">List group item</a></li>
		<li class="list-group-item active"><a href="#">List group item</a></li>
	</ul>

	<!-- Unstyled list without border -->
	<ul class="list-group no-border">
		<li class="list-group-item"><a href="#">List group item without border</a></li>
		<li class="list-group-item"><a href="#">List group item without border</a></li>
		<li class="list-group-item"><a href="#">List group item without border</a></li>
		<li class="list-group-item"><a href="#">List group item without border</a></li>
		<li class="list-group-item"><a href="#">List group item without border</a></li>
	</ul>

	<!-- Styled List group  -->
	<ul class="list-group no-border">
	  <li class="list-group-item"><a href="#"><i class="fa fa-dot-circle-o"></i> icon List item without border</a></li>
	  <li class="list-group-item"><a href="#"><i class="fa fa-dot-circle-o"></i> icon List item without border</a></li>
	  <li class="list-group-item"><a href="#"><i class="fa fa-dot-circle-o"></i> icon List item without border</a></li>
	  <li class="list-group-item"><a href="#"><i class="fa fa-dot-circle-o"></i> icon List item without border</a></li>
	  <li class="list-group-item"><a href="#"><i class="fa fa-dot-circle-o"></i> icon List item without border</a></li>
	</ul>

						

How to use

List groups allows to display series of content in a precise manner.

• Use class .no-border with .list-group for unbordered list gtoups
• To show the active list-group-item use class .active with it
• To use icons as list style, use any icon within <i> element into the .list-group-item wrapper. For available icon set See here

	<ul class="list-group">
		<li class="list-group-item">
			<a href="#"><i class="fa fa-dot-circle-o"></i> list item with icon & badge<span class="badge">(6)</span></a>
		</li>
		<li class="list-group-item">
			<a href="#"><i class="fa fa-dot-circle-o"></i> list item with icon & badge<span class="badge badge-default">12</span></a>
		</li>
		<li class="list-group-item list-group-item-success">
			<a href="#"><i class="fa fa-dot-circle-o"></i> list item with icon & badge<span class="badge badge-success">6</span></a>
		</li>
		<li class="list-group-item">
			<a href="#"><i class="fa fa-dot-circle-o"></i> list item with icon & badge<span class="badge">(5)</span></a>
		</li>
	</ul>

						

How to use

• Use .badge with <span> element into .list-group-item to show badge
• You can use different contextual classes for different badge style. You can find contextual classes here