Bootstrap List group
Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see an example of Bootstrap List Groups:
<h1>Example of Basic List Groups</h1>
<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
We can also use badges with list group. It will automatically position the right. To create a badge, you have to use the <span> element with class .badge inside the list item. Let us see an example of Bootstrap List Group With Badges:<div class="container">
<h2>List Group With Badges</h2>
<ul class="list-group">
<li class="list-group-item">Vote <span class="badge">12</span></li>
<li class="list-group-item">Not vote <span class="badge">5</span></li>
<li class="list-group-item">Remaining Vote<span class="badge">23</span></li>
</ul>
</div>
List Group With Linked Items
We can create a hyperlink of the list group. By default it is grey color when hover on it. You have to use <div> element instead of <ul> and <a> instead of <li> element. Let us see an example of Bootstrap List Group With Linked Items:<div class="container">
<h2>Example of List Group With Linked Items</h2>
<div class="list-group">
<a href="#" class="list-group-item">First item with link</a>
<a href="#" class="list-group-item">Second item with link</a>
<a href="#" class="list-group-item">Third item with link</a>
</div>
</div>
Bootstrap Active State
The bootstrap active state is used to highlight the current item. We have to use .active class. Let us see an example of Bootstrap Active State:<div class="container">
<h2>Example of Active Item in a List Group</h2>
<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>
</div>
Bootstrap Disabled state
The bootstrap disabled state is used to disabled the current item. You have to use .disabled class. Let us see an example of Bootstrap Disabled State:<div class="container">
<h2>Example of List Group With a Disabled Item</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">First item with disabled</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>
Bootstrap Contextual Classes
Bootstrap contextual classes is used to color the list items. There are various list item's color classes:- .list-group-item-success
- .list-group-item-info
- .list-group-item-warning etc.
<div class="container">
<h3> Excample of List Group With Contextual Classes</h3>
<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>
</ul>
<h3>Example of Linked Items With Contextual Classes</h3>
<p>Move the mouse over the linked items.</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">First item</a>
<a href="#" class="list-group-item list-group-item-info">Second item</a>
</div>
</div>