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.
1 2 3 4 5 6 7 | <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> |
Additionally, you can also use the .active class to highlight the current item in the list.
For example:
1 2 3 4 5 6 7 | <ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> |
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:
1 2 3 4 5 6 7 | <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div> |
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:
1 2 3 4 5 6 7 | <div class="list-group"> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item">Third item</a> </div> |
Bootstrap Flush / Remove Borders
You can remove some borders and rounded corners using the .list-group-flush
class. See the code below:
1 2 3 4 5 6 7 8 9 | <ul class="list-group list-group-flush"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul class="”list-group”"> <li class="”list-group-item" list-group-item-success”="">Success item</li> <li class="”list-group-item" list-group-item-secondary”="">Secondary item</li> <li class="”list-group-item" list-group-item-info”="">Info item</li> <li class="”list-group-item" list-group-item-warning”="">Warning item</li> <li class="”list-group-item" list-group-item-danger”="">Danger item</li> <li class="”list-group-item" list-group-item-primary”="">Primary item</li> <li class="”list-group-item" list-group-item-dark”="">Dark item</li> <li class="”list-group-item" list-group-item-light”="">Light item</li> </ul> |
These classes can also be used with link items.
See the code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a> </div> |
Bootstrap List Group with Badges
You can also use badges with the items by combining the .badge
classes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Inbox <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Ads <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Junk <span class="badge badge-primary badge-pill">99</span> </li> </ul> |