Why, When and How to Use a Bootstrap List Group

Using Bootstrap 4 is extremely handy in creating useful functionalities and styling them, too. In our previous chapters, we have already covered modifying the look of various elements, such as buttons and progress bars.

Now, we will review one more element called Bootstrap list groups. By understanding how to style them, you will be able to make the overall look of your website more coherent.

For example, if you work in e-commerce, using Bootstrap list group component you can easily create a sidebar navigation menu for your shop. Bootstrap lists would then serve as specific categories of items, making it easier to browse and adding to excellent user experience.

Bootstrap List Group: Main Tips

• Using Bootstrap 4 you can create list groups that provide an alternative way to display lists in your content.
• The most important elements to remember are Bootstrap ul (<ul>).

Grouping and Modifying Items

To create a list group for your content, you will need to assign the .list-group class to the <ul> element and the .list-group-item class to the <li> elements inside. Take a look to this HTML example to get a better idea how that should look:

<ul class="list-group">
 <li class="list-group-item">Cat</li>
 <li class="list-group-item">Dog</li>
 <li class="list-group-item">Rabbit</li>
 <li class="list-group-item">Alpaca</li>
</ul>

Items in list groups may be displayed as active or disabled using the .active and .disabled classes on the individual list group items created by the <li> tag. Try the code example below to see how active and disabled items differ from others:

<ul class="list-group">
 <li class="list-group-item disabled">Cat</li>
 <li class="list-group-item active">Dog</li>
 <li class="list-group-item">Rabbit</li>
 <li class="list-group-item">Alpaca</li>
</ul>

If you want to generate a list of linked items, you can imply the <li> tag with the <a>tag, and the <ul> tag with the <div> tag. This is what it should look like in your HTML document:

<div class="list-group">
 <a class="list-group-item list-group-item-action" href="#">Cat</a>
 <a class="list-group-item list-group-item-action" href="#">Dog</a>
 <a class="list-group-item list-group-item-action" href="#">Rabbit</a>
 <a class="list-group-item list-group-item-action" href="#">Alpaca</a>
</div>

Using Contextual Classes

Like most of the Bootstrap classes, list group classes can be combined with contextual classes to provide them with different colors. Here is the whole Bootstrap classes list for you to use:

• list-group-item-primary
• list-group-item-secondary
• list-group-item-info
• list-group-item-success
• list-group-item-danger
• list-group-item-warning
• list-group-item-light
• list-group-item-dark

In the example below, every list item has been provided with a different background color:

<ul class="list-group">
 <li class="list-group-item list-group-item-success">Cat</li>
 <li class="list-group-item list-group-item-warning">Dog</li>
 <li class="list-group-item list-group-item-danger">Rabbit</li>
 <li class="list-group-item list-group-item-primary">Alpaca</li>
</ul>

Note: The asterisk * represents the original class that the contextual class is applied to. I.e.: .list-group-item would have .list-group-item-primary applied as well to change the element's style according to the contextual class.

Bootstrap List Group: Summary

• Bootstrap list groups provide a way to display content lists differently. To create them, you have to modify the Bootstrap ul (<ul>) elements.
• By using contextual Bootstrap classes, list groups can have colors applied to them.
• This functionality allows you to create a sidebar navigation menu where Bootstrap lists serve as categories.