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.

 

    First item
	
    Second item
	
    Third item

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

For example:

 

    Active item
	
    Second item
	
    Third item

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:

 

    First item
	
    Second item
	
    Third item

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:

 

    Disabled item
	
    Disabled item
	
    Third item

Bootstrap Flush / Remove Borders

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

 

    First item
	
    Second item
	
    Third item
	
    Fourth item

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

 

    Success item
	
    Secondary item
	
    Info item
	
    Warning item
	
    Danger item
	
    Primary item
	
    Dark item
	
    Light item

These classes can also be used with link items.

See the code below:

 

    Action item
	
    Success item
	
    Secondary item
	
    Info item
	
    Warning item
	
    Danger item
	
    Primary item
	
    Dark item
	
	
    Light item

Bootstrap List Group with Badges

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