In this Bootstrap List Group tutorial, we will cover basic list groups, active and disabled items, actionable items, horizontal groups, flush, styles (contextual classes), lists with badges, with custom content etc:
Please note that we have used Bootstrap version 4 in all the examples.
=> Visit Here To Learn Bootstrap From Scratch
Table of Contents:
Basic Bootstrap List Groups
Creating a Bootstrap list group is easy and straightforward. Follow the below two steps to create a list group.
- Add the .list-group class to <ul>.
- Add the .list-group-item class to <li>s.
The table below summarizes the list group classes of Bootstrap 4.
| Class | Usage |
|---|---|
| list-group | This class uses to create a basic Bootstrap list group. |
| list-group-item | This class also uses to create a basic Bootstrap list group item. |
| list-group-item with active | Indicate an active item in a list group. |
| list-group-item with disabled | Indicate a disabled item in a list group. |
| list-group-item-action | Create an actionable list group item. |
| list-group-horizontal | Create a horizontal list group. |
| list-group-flush | Remove some borders from a list group. |
| list-group-item-primary | Add blue color to a list group item. |
| list-group-item-secondary | Add grey color to a list group item. |
| list-group-item-success | Add green color to a list group item. |
| list-group-item-info | Add red color to a list group item. |
| list-group-item-warning | Add orange color to a list group item. |
| list-group-item-danger | Add a light blue color to a list group item. |
| list-group-item-light | Add a light grey color to a list group item. |
| list-group-item-dark | Add a dark grey color to a list group item. |
| list-group with d-flex | This class helps to create a list group with badges. |
| list-group with badges | This class also helps to create a list group with badges. |
Example Of A Basic List Group
The below programming code shows an example of a basic group. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <ul class="list-group"> <li class="list-group-item">List group item 1</li> <li class="list-group-item">List group item 2</li> <li class="list-group-item">List group item 3</li> <li class="list-group-item">List group item 4</li> <li class="list-group-item">List group item 5</li> </ul> </div> </body> </html>
Browser output of the above programming code.
Active And Disabled Items
Add the .active class to indicate an active item and add the .disabled class to indicate a disabled item in a list group.
Example
The below programming code shows an active and a disabled item. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <ul class="list-group"> <li class="list-group-item active">This is an active list group item.</li> <li class="list-group-item">This is a list group item.</li> <li class="list-group-item">This is another list group item.</li> <li class="list-group-item disabled" aria-disabled="true">This is a disabled list group item.</li> </ul> </div> </body> </html>
Browser output of the above programming code.
Actionable Items
Add the .list-group-item-action class to create actionable items. There are two types of actionable list group items as shown below.
#1) Items with links: For items with links, use the <a> tags to create list group items.
#2) Items with buttons: For items with buttons, use the <button> tags to create list group items.
Example
The programming code below shows an example of actionable items. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3>Linked list group</h3> <div class="list-group mb-3"> <a href="#" class="list-group-item list-group-item-action active">I'm an active list group item.</a> <a href="#" class="list-group-item list-group-item-action">I'm a list group item.</a> <a href="#" class="list-group-item list-group-item-action">I'm also a list group item.</a> <a href="#" class="list-group-item list-group-item-action">I'm a list group item too.</a> <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">I'm a disabled list group item.</a> </div> <h3>Button list group</h3> <div class="list-group mb-3"> <button type="button" class="list-group-item list-group-item-action active">I'm an active list group item.</button> <button type="button" class="list-group-item list-group-item-action">I'm a list group item.</button> <button type="button" class="list-group-item list-group-item-action">I'm also a list group item.</button> <button type="button" class="list-group-item list-group-item-action">I'm a list group item too.</button> <button type="button" class="list-group-item list-group-item-action" disabled>I'm a disabled list group item.</button> </div> </div> </body> </html>
Browser output of the above programming code.
Horizontal List Groups
Add the .list-group-horizontal class to create a horizontal list group.
Example
The below programming code shows an example of a horizontal group. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <ul class="list-group list-group-horizontal"> <li class="list-group-item">Fresh Milk</li> <li class="list-group-item">Tea</li> <li class="list-group-item">Coffee</li> <li class="list-group-item">Fruit Juice</li> </ul> </div> </body> </html>
Browser output of the above programming code.
List Group Flush
Add the .list-group-flush class to remove some borders from the list group.
Example
The below programming code shows an example of flush. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <ul class="list-group list-group-flush"> <li class="list-group-item">Java</li> <li class="list-group-item">Python</li> <li class="list-group-item">PHP</li> <li class="list-group-item">JavaScript</li> <li class="list-group-item">C++</li> </ul> </div> </body> </html>
Browser output of the above programming code.
List Group Styles (Contextual Classes)
Bootstrap uses the following contextual classes for list group items. It will add various colors to the items.
- .list-group-item-primary: This class is used to add blue color to a group item.
- .list-group-item-secondary: This class is used to add grey color to a group item.
- .list-group-item-success: This class is used to add green color to a group item.
- .list-group-item-danger: This class is used to add red color to a group item.
- .list-group-item-warning: This class is used to add orange color to a group item.
- .list-group-item-info: This class is used to add a light blue color to a group item.
- .list-group-item-light: This class is used to add a light grey color to a group item.
- .list-group-item-dark: This class is used to add a dark grey color to a group item.
Example
The below programming code shows an example of contextual classes for group items and contextual classes for actionable group items.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h6>Contextual classes for list group items</h6> <ul class="list-group mb-3"> <li class="list-group-item list-group-item-primary">This is a primary list group item.</li> <li class="list-group-item list-group-item-secondary">This is a secondary list group item.</li> <li class="list-group-item list-group-item-success">This is a success list group item.</li> <li class="list-group-item list-group-item-danger">This is a danger list group item.</li> <li class="list-group-item list-group-item-warning">This is a warning list group item.</li> <li class="list-group-item list-group-item-info">This is an info list group item.</li> <li class="list-group-item list-group-item-light">This is a light list group item.</li> <li class="list-group-item list-group-item-dark">This is a dark list group item.</li> </ul> <h6>Contextual classes for actionable list group items</h6> <div class="list-group mb-3"> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is an info list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item.</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item.</a> </div> </div> </body> </html>
Browser output of the above programming code.
List-Groups With Badges
Add badges within the list group as shown in the below example. You can add colors to the badge by adding one of the contextual classes (badge-*). You can also change the shape of the badge.
Note: We will discuss badges in detail in our upcoming tutorial.
Example
The below programming code shows an example of a list-group with badges. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Apples <span class="badge badge-danger badge-pill">24</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Oranges <span class="badge badge-warning badge-pill">10</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Pears <span class="badge badge-success badge-pill">5</span> </li> </ul> </div> </body> </html>
Browser output of the above programming code.
List-Groups With Custom Content
Add HTML content within the group as shown in the below example.
Example
The below programming code shows an example of a group with custom content. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading 1</h5> <small>yesterday</small> </div> <p class="mb-1">This is the list group item 1.</p> <small>Linked list groups</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading 2</h5> <small class="text-muted">1 month ago</small> </div> <p class="mb-1">This is the list group item 2.</p> <small class="text-muted">Linked list groups</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading 3</h5> <small class="text-muted">3 months ago</small> </div> <p class="mb-1">This is the list group item 3.</p> <small class="text-muted">Linked list groups</small> </a> </div> </div> </body> </html>
Browser output of the above programming code.
Frequently Asked Questions
In this section, we will explore some of the FAQs about bootstrap 4 list-group
Q #1) What are the two main classes that are used to create Bootstrap lists/list groups?
Answer: The .list-group class and the .list-group-item class are the two main classes that are used to create Bootstrap 4 list groups.
Q #2) How to make a list group item active?
Answer: Add the .active class to make a list of group item active.
Example:
<li class=”list-group-item active”>This is an active list item</li>
Q #3) How to make a list group item disabled?
Answer: Add the .disabled class to disable a list group item.
Example:
<li class=”list-group-item disabled” aria-disabled=”true”>This is a disabled list item</li>
Q #4) Which class used to create an actionable item?
Answer: The .list-group-item-action class is used to create an actionable item.
Q #5) What are the two types of actionable list group items?
Answer: The two types of actionable items are group items with links and group items with buttons.
Q #6) How to make a horizontal list group?
Answer: Add the .list-group-horizontal class to <ul> to make a horizontal lists.
Q #7) Which class is used to remove borders from a list?
Answer: The .list-group-flush class is used to remove some borders from a list-group.
Q #8) Which contextual classes are used for list-groups?
Answer: The contextual classes used are .list-group-item-primary, .list-group-item-secondary, .list-group-item-success, .list-group-item-danger, .list-group-item-warning, .list-group-item-info, .list-group-item-light and .list-group-item-dark.
Q #9) How to add colors to list group items with badges?
Answer: Use .badge-* classes to add colors to list items with badges where * is a contextual class.
Q #10) Can we create lists with custom content?
Answer: Yes, we can create lists with custom content.
Conclusion
Bootstrap uses a wide range of classes to style list groups. You can also create different types of lists such as lists with actionable list items, horizontal groups, groups with badges, etc.
Hope you found this tutorial helpful. In our upcoming tutorial, we will discuss Bootstrap 4 alerts, badges, and icons in detail.
=> Explore The Simple Bootstrap Training Series Here