Bootstrap List Group
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 Domain Name Registration</li>
<li class="list-group-item">Free Window Space hosting</li>
<li class="list-group-item">Number of Images</li>
<li class="list-group-item">24*7 support</li>
<li class="list-group-item">Renewal cost per year</li>
</ul>
Adding Badges to 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 Domain Name Registration</li>
<li class="list-group-item">Free Window Space hosting</li>
<li class="list-group-item">Number of Images</li>
<li class="list-group-item">
<span class="badge">New</span>
24*7 support
</li>
<li class="list-group-item">Renewal cost per year</li>
<li class="list-group-item">
<span class="badge">New</span>
Disocunt Offer
</li>
</ul>
Linking List Group Items
By using anchor tags instead of list items, we can link the list groups. We need to use <div> instead of <ul> element. Following example demonstrates this:
<a href="#" class="list-group-item active">
Free Domain Name Registration
</a>
<a href="#" class="list-group-item">24*7 support</a>
<a href="#" class="list-group-item">Free Window Space hosting</a>
<a href="#" class="list-group-item">Number of Images</a>
<a href="#" class="list-group-item">Renewal cost per year</a>
Add Custom Content to List Group
We can add any HTML content to the above linked list groups. 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>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
24*7 support
</h4>
<p class="list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
Business 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>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">24*7 support</h4>
<p class="list-group-item-text">We provide 24*7 support.</p>
</a>
</div>
ليست هناك تعليقات:
إرسال تعليق