Bootstrap List Group

In this chapter, we will explain list groups. The list component is used to display complex and custom content in a list format. The steps to create a basic list group are as follows:

• Add the class .list-group to the <ul> element.
• Add the class .list-group-item to the <li> elements.

The following example demonstrates this:

Example

<ul class="list-group">
    <li class="list-group-item">Free Domain 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">Annual Renewal Cost</li>
</ul>

The result is as shown below:

Adding Badges to List Groups

We can add badge components to any list item, and it will automatically position itself to the right. Simply add <span class="badge"> within the <li> element. The following example demonstrates this:

Example

<ul class="list-group">
    <li class="list-group-item">Free Domain 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">Annual Renewal Cost</li>
    <li class="list-group-item">
        <span class="badge">New</span>
        Discount Offers
    </li>
</ul>

The result is as shown below:

Adding Links to List Groups

By using anchor tags instead of list items, we can add links to list groups. We need to use <a> instead of <li> elements. The following example demonstrates this:

Example

<a href="#" class="list-group-item active">
    Free Domain 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">Annual Renewal Cost</a>

The result is as shown below:

Adding Custom Content to List Groups

We can add any HTML content to the list group that already has links. The following example demonstrates this:

Example

<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 Registration
        </h4>
        <p class="list-group-item-text">
            You will get a free domain registration through our website.
        </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 offer 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 Registration
</h4>
<p class="list-group-item-text">
You will get a free domain registration through the web.
</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>

Result as shown below:

Horizontal List

In the above examples, the lists are displayed vertically. If we need a horizontal list, it can be achieved with the following code:

Example

.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}

Result as shown below: