Elements
These modular elements can be readily used and customized across pages and in different blocks.
Basic List Group <> show code
<!-- 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
Unstyled List group without border
- List group item without border
- List group item without border
- List group item without border
- List group item without border
- List group item without border
Styled List group
With icon & badges <> show code
<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