• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

In this article we will study about list group. Purpose of list group component is to render complex and customized content in lists.

To get a basic list group:
? Add the class .list-group to element <ul>.
? Add class .list-group-item to <li>.


Following example demonstrates this:

<ul class="list-group">
<li class="list-group-item">free bootstrap turorial</li>
<li class="list-group-item">make own website using bootstrap</li>
<li class="list-group-item">learn bootstrap</li>
<li class="list-group-item">learn list group bootatrap</li>
</ul>


1)Adding Badge to your List Group:
We can add the badges component to any list group item and it will automatically be positioned on the right.
Just add <span class="badge"> within the <li> element.

Following example demonstrates this:
<ul class="list-group">
<li class="list-group-item">free bootstrap turorial</li>
<li class="list-group-item">make own website using bootstrap<span class="badge">Free</span></li>
<li class="list-group-item">learn bootstrap</li>
<li class="list-group-item">learn list group bootatrap<span class="badge">Free</span></li>
</ul>

2)Adding State to your List Group:

a)active :Use the .active class to highlight the current item.
b)disabled:Use the .disabled class to highlight the current item.

Following example demonstrates this:
<ul class="list-group">
<li class="list-group-item">free bootstrap turorial</li>
<li class="list-group-item active">make own website using bootstrap<span class="badge">Active</span></li>
<li class="list-group-item">learn bootstrap</li>
<li class="list-group-item disabled">learn list group bootatrap<span class="badge">Disabled</span></li>
</ul>


3)Adding color to your list group:Contextual classes can be used to color list items.
The classes for coloring list items are
1).list-group-item-success
2).list-group-item-info
3).list-group-item-warning
4).list-group-item-danger

Following example demonstrates this:
<ul class="list-group">
<li class="list-group-item list-group-item-success">free bootstrap turorial<span class="badge">success</span></li>
<li class="list-group-item list-group-item-info">make own website using bootstrap<span class="badge">info</span></li>
<li class="list-group-item list-group-item-warning">learn bootstrap<span class="badge">warning</span></li>
<li class="list-group-item list-group-item-danger">learn list group bootatrap<span class="badge">danger</span></li>
</ul>

4)Creating list group of anchor: The items in a list group can also be hyperlinks .The will add a gray background color on hover
To ctrate a list group with linked items , use <div> instead of <ul> and <a> instead of <li>

Following example demonstrates this:
<div class="list-group">
<a class="list-group-item">free bootstrap turorial</a>
<a class="list-group-item">make own website using bootstrap</a>
<a class="list-group-item">learn bootstrap</a>
<a class="list-group-item">learn list group bootatrap</a>
</div>


5)Adding Custom content in your list group: You can add nearly any HTML  inside a list group item.Bootstrap provides the classess .list-group-item-heading and
.list-group-item-text which can be used as follows

Following example demonstrates this:

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading"> Starter Website Package </h4> </a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading"> Free Domain Name Registration </h4>
<p class="list-group-item-text"> You will get a free domain registration with website pages. </p>
</a>
</div>