Tutorial on How to make Bootstrap 3 List Groups

A list group is used to display a unordered or a div in a list view, the list view mainly used in sidemenu or display some list of content. Now lets discuss about Bootstrap 3 List Groups , is a very flaxible component for displaying lists of elements in a beautiful manner.

bootstrap 3 list group

Bassic List Group

To make a basic list group take a unordered list and place class name .list-group on ul tag and class name .list-group-item on li tag and basic list group is done for bootstrap 3.
Example:

Try it Yourself

<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>

Badges on list gropup:

.badge inside a list group li and you have done a listgroup with bagges
example:

Try it Yourself

<ul class="list-group">
<li class="list-group-item">First item <span class="badge">12</span></li>
<li class="list-group-item">Second item <span class="badge">9</span></li>
<li class="list-group-item">Third item <span class="badge">15</span></li>
</ul>

Linked Items List Grooup

To create a list group with linked item , take a basic list group and place div in position of ul and place ancher tag in position of li
Example:

Try it Yourself

<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>

List Group With active item

Place class name .actine with class name .list-group-item in any list group item and it will become a blue background with white text element.
Example:

Try it Yourself

<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 Listgroup item

Place class name .disabled with class name .list-group-item in any list group item and it will become a light gray background element and will not be clickable.
Example:

Try it Yourself

<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item disabled">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

List Group with various color

In case of list group there 5 background color and accordingly text color in bootstrap 3 list group,

• Deep Blue with white text color
  use .active class name in a list group item to make deep blue background with white text color
• light green with deep green text color
  use .list-group-item-success class name in a list group item to make light green background with deep green text color
• light blue or sky color deep blue text color
  use .list-group-item-info class name in a list group item to make light blue or sky background with deep blue text color
• light yellow with deep yellow text color
  use .list-group-item-warning class name in a list group item to make light yellow background with deep yellow text color
• and light red with deep red text color
  use .list-group-item-danger class name in a list group item to make light red background with deep red text color

Example:

Try it Yourself

<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item list-group-item-success">Secondt item</a>
<a href="#" class="list-group-item list-group-item-info">Third item</a>
<a href="#" class="list-group-item list-group-item-warning">Fourth item</a>
<a href="#" class="list-group-item list-group-item-danger">Fifth item</a>
</div>

Custom Content in Bootstrap 3 List Group

You can use any html tag inside a list group item like heading or para etc.
Example:

Try it Yourself

<ul class="list-group">
<li class="list-group-item">
<h2>its a heading</h2>
<p>its a peragraph</p>
</li>
<li class="list-group-item">
<h2>its a heading</h2>
<p>its a peragraph</p>
</li>
<li class="list-group-item">
<h2>its a heading</h2>
<p>its a peragraph</p>
</li>
</ul>

in this post we have learned about Bootstrap 3 List Groups, hope it helped you. please provide your comment to make the site more usefull and better.

Thanks for reading