Lesson 16: List Groups in Bootstrap 5

List Groups in Bootstrap 5 are a flexible and powerful component used to display a series of information on websites, apps, etc. We will examine how to use List Groups in Bootstrap 5 with Tipsmake.com!

Basic List Groups in Bootstrap 5

The most basic list group in Bootstrap 5 is an unordered list of items. To create a basic list group, use the `` class .list-group, and ``.

with class .list-group-item:

• First item
• Second items
• Third items

Example for the website TipsMake.com:

 Bootstrap Example 

Basic List Group on Tipsmake.com

• Section 1
• Section 2
• Section 3

The Item Is Currently Active

Use a class .activeto highlight the current item:

• Active items
• Second items
• Third items

For example, on the website Tipsmake.com:

 Bootstrap Example 

This Item Is Currently Active in the List Group on Tipsmake.com

• Section 1
• Section 2
• Section 3

A List Group with Linked Items

To create a group list with linked items, use `replace` and `instead` instead of `instead`.

Optionally, add a class .list-group-item-actionif you want the background color to turn gray when you hover your mouse over it:

 First item Second item Third item 

For example, on the website Tipsmake.com:

 Bootstrap Example 

The List Includes Linked Items on Tipsmake.com

English example text

Inactive Item

The class .disabledadds a lighter text color to inactive items. And when used on links, it removes the hover effect.

 Disabled item Disabled item Third item 

For example, on the website Tipsmake.com:

 Bootstrap Example 

The List Contains Disabled Items on Tipsmake.com

The `disabled` class colors disabled items more lightly. And when used on links, it removes the hover effect.

English example text

Remove Border

Use classes .list-group-flushto remove some borders and rounded corners:

• First item
• Second items
• Third items
• fourth item

For example, on the website Tipsmake.com:

Numbered List Group

Use classes .list-group-numberedto create items that are listed with numbers in front of them:

1. First item
2. Second items
3. Third items

For example, on the website Tipsmake.com:

Horizontal List Group

If you want the items in the list to display horizontally (side-by-side instead of above each other), add the .list-group-horizontalclass .list-group:

• First item
• Second items
• Third items
• fourth item

For example, on the website Tipsmake.com:

 Bootstrap Example 

Horizontal List Grouping on Tipsmake.com

The class.list-group-horizontal displays the items in the list horizontally:

• Section 1
• Section 2
• Section 3
• Section 4

Context-based Classes

Contextual classes can be used to add color to items in a list:

The class colors the items in the list, including: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark and list-group-item-light,:

• Success item
• Multiple items
• Internal items
• Missing item
• Danger item
• Primary item
• Dark item
• Light item

For example, on the website Tipsmake.com:

 Bootstrap Example 

Contextual List Grouping in QTM

• Success
• Additional
• Information
• Warning
• Danger
• Basic
• Dark colors
• Light color

Link Items to Classes in Context

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

For example, on the website Tipsmake.com:

 Bootstrap Example 

Contextually Linked Items on Tipsmake

Move your mouse over the linked items to see the cursor effect:

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

List Group with Badge

Combine the class .badgewith the utility/helper class to add badges inside list groups:

• Inbox 12
• Ads 50
• Junk 99

For example, on the website Tipsmake.com:

Above is everything you need to know about creating list groups in Bootstrap 5. As you can see, it's very easy to create professional list groups for your website by simply changing a few elements when coding with Bootstrap 5 .

FAQ

What is the main point of lesson 16: list groups in bootstrap 5?

List groups in Bootstrap 5 are a flexible and powerful component for displaying a series of information. Read the key facts, context, and practical takeaways.

Why is this development important?

Key takeaway: List groups in Bootstrap 5 are a flexible and powerful component for displaying a series of information.

What are the key takeaways?

List Groups in Bootstrap 5 are a flexible and powerful component used to display a series of information on websites, apps, etc.