BS List Groups
Basic List Groups
The simplest list group is an unordered list with list items:
------list mukava -----
To make a basic list group, use a <ul> element with class .list-group and <li> elements with class .list-group-item.
Example
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
List Group With Badges
You can also include badges in a list group. The badges will automatically be positioned to the right.
------list mukava -----
To make a badge, insert a <span> element with class .badge within the list item:
Example
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
List Group With Linked Items
The items in a list group may also be hyperlinks. This will add a grey background color on hover.
------list mukava -----
To build a linked list group, use <div> instead of <ul> and <a> instead of <li>.
Example
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Active State
------list mukava -----
Use the .active class to highlight the current item:
Example
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Disabled Item
The following list group contains a disabled item:
------list mukava -----
To disable an object, use the .disabled class:
Example
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Contextual Classes
Contextual classes can be used to color list items.
------list mukava -----
The classes for coloring list items are: .list-group-item-success, list-group-item-info, and list-group-item-warning, .list-group-item-danger:
Example
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Custom Content
You can include almost any HTML within a list group item.
Bootstrap includes the classes .list-group-item-heading and .list-group-item-text, which can be used as follows:
Example
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
