Bootstrap List Groups

In this chapter, we will learn about the different ways in which Bootstrap 4 can help you stylize the List groups

Bootstrap Basic List Groups

So, the basic contextual class for list groups is the .list-group class.

Unordered list or <ul> is the most basic list group that we have and we use the .list-group class with it for the basic list groups.

For the <li> items, we have the .list-group-items class.

The following code will illustrate the use of both these classes in creating a basic list group.

Additionally, you can also use the .active class to highlight the current item in the list.

For example:

Bootstrap List Group with Linked Items

While creating a list group with linked items, the <ul> element is replaced with a <div>, the <a> elements come in place of the <li> items.

You can also add the .list-group-item-action class for a grey-backrground hover effect.

Look at the example code below for better understanding:

Bootstrap List Group Disabled Item

Disabled items work in two ways.

We use the .disabled class with the list items and here are the effects base on the type of list group:

  • For a normal list group, you the text color for the disabled item gets a little lighter.
  • When used with list group with linked items, the hover effect is also gone

Here’s the sample code that you can test:

Bootstrap Flush / Remove Borders

You can remove some borders and rounded corners using the .list-group-flush class. See the code below:

Bootstrap Contextual Classes

There are different contextual classes for Bootstrap 4 list groups.

These classes can be used for coloring the list items based on the type of content they have.

Here’s a list for all these

  • .list-group-item-success
  • list-group-item-secondary
  • list-group-item-info
  • list-group-item-warning
  • .list-group-item-danger
  • list-group-item-dark
  • list-group-item-light,:

The code below illustrates the uses of all these classes

These classes can also be used with link items.

See the code below:

Bootstrap List Group with Badges

You can also use badges with the items by combining the .badge classes