Bootstrap List Groups

Bootstrap List Groups is a flexible and responsive component that allows you to display a series of content in an organized and appealing manner.

List Groups are created using the HTML <ul> or <ol> elements and CSS classes provided by Bootstrap.

In this guide, you will learn how to use Bootstrap List Groups to create lists of items, including links, buttons, and badges.

Creating a Basic List Group

To create a basic List Group, you need to wrap a list of items in an HTML <ul> or <ol> element and add the .list-group class.

Each item in the list should be contained within a <li> element and include the .list-group-item class.

Here's an example of a basic List Group:

<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

Adding Links to List Group Items

You can also add links to List Group items by using the <a> element instead of the <li> element.

The .list-group-item class is still added to the <a> element to maintain the styling of the List Group.

Here's an example of a List Group with links:

<ul class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
</ul>

Adding Badges to List Group Items

Badges can be added to List Group items to display additional information, such as the number of items or notifications.

To add a Badge, you need to wrap the content of the List Group item in a <span> element and add the .badge class.

Here's an example of a List Group with Badges:

<ul class="list-group">
    <li class="list-group-item">Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item">Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item">Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
    </li>
    <li class="list-group-item">Porta ac consectetur ac
        <span class="badge badge-primary badge-pill">5</span>
    </li>
    <li class="list-group-item">Vestibulum at eros
        <span class="badge badge-primary badge-pill">7</span>
    </li>
</ul>

Adding Buttons to List Group Items

Buttons can also be added to List Group items to create interactive components.

To add a button, you can wrap the content of the List Group item in a <button> element and add the appropriate classes for the desired styling.

Here's an example of a List Group with buttons:

<ul class="list-group">
    <button type="button" class="list-group-item list-group-item-action">Cras justo odio</button>
    <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
    <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
</ul>

Customizing List Group Styles

Bootstrap provides several classes to customize the style and behavior of List Groups.

You can change the color of the List Group items by using the .list-group-item-primary, .list-group-item-secondary, .list-group-item-success, .list-group-item-danger, .list-group-item-warning, .list-group-item-info, and .list-group-item-light classes.

You can also disable the hover effect on List Group items by using the .list-group-item-action class.

This can be useful if you want to create a List Group with buttons instead of links.

Here's an example of a customized List Group:

<ul class="list-group">
    <li class="list-group-item list-group-item-danger">Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item list-group-item-warning">Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item list-group-item-success">Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
    </li>
    <li class="list-group-item list-group-item-primary">Porta ac consectetur ac
        <span class="badge badge-primary badge-pill">5</span>
    </li>
    <li class="list-group-item list-group-item-info">Vestibulum at eros
        <span class="badge badge-primary badge-pill">7</span>
    </li>
</ul>

Conclusion

Bootstrap List Groups are a versatile component that can be used to display a list of items in a visually appealing and organized manner.

Whether you're using them to display simple text items, items with badges, or items with buttons, Bootstrap makes it easy to create List Groups that match the look and feel of your website.

With a wide range of customization options, you can create List Groups that are tailored to your specific needs.

Bootstrap Basics