Bootstrap 4 List Groups

Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered list. To create a basic list group,

  • Add the .list-group class to the <ul> element to create list.
  • Add the .list-group-item to the <li> element to add list items to the list.

Example

Output

Active State – Bootstrap 4 allows you to highlight your list item to show current active selection. To make list item active, add the .active class to the <li> element. The .active class adds the blue (primary) background color to the active list item.

Example

Output

List Group with Linked Items – You can also convert the list items into links. To create a list group with linked item,

  • Add the <div> element instead of <ul> element and <a> element instead of <li> element.
  • Add .list-group class to the <div> element
  • Add .list-group-item class to the <a> element. If you want hover effect when you move cursor on the list item then also add .list-group-item-action class which is totally optional. This class provides gray background color on hover.

Example

Output

Disabled Item – You can also make your list items disabled. The disabled links turns into the light gray color. To create a disabled list item, add .disabled class along with the .list-group-item class to the <a> element.

Note: Some disabled links require custom JavaScript to fully disable their action.

Example

Output

list3.PNG

Flush/Removed Borders – Bootstrap 4 provides some predefined classes that allows you to remove some border and round corners from the list to represent list group item edge to edge such as cards. To create a Flush/removed border list group, add the .list-group-flush class along with the .list-group class to the <ul> element.

Example

Output

list4.PNG

Horizontal List Groups – The default layout of the list group is in the vertical order. But with the help of bootstrap 4, you can also place the list items horizontal (side by side) instead of vertical order in a list group. To create a horizontal list group,

  • Add the .list-group-horizontal class along with the .list-group class to the <ul> element.
  • Add .list-group-item class to the <li> element to add list items in a list.

Example

Output

list5.PNG

Contextual Classes – You can also make your list more stylish and elegant by providing different background colors to the list items with the help of contextual classes. The contextual color classes are:-

  • list-group-item-success
  • list-group-item-danger
  • list-group-item-info
  • list-group-item-secondary
  • list-group-item-warning
  • list-group-item-primary
  • list-group-item-dark
  • list-group-item-light

You can use any of the mentioned classes above to provide the background color in list items.

To create a list groups with colored background, add contextual color class (.list-group-item-*) along with the .list-group-item to the <li> element.

Example

Output

list6.PNG

Link items with contextual classes – Like colorful list items you can also make colorful links as well. To create link items with contextual classes,

  • Add .list-group class to the <div> element.
  • Add .list-group-item-action class along with the contextual color (.list-group-item-*) class and .list-group-item class to the <a> element.

Example

Output

list7.PNG

List Group with Badges – Bootstrap 4 allows you to add icons and additional information to the list items to make them more stylish and helpful also. To create a list group with badges,

  • Add .list-group class to the <ul> element.
  • Add .list-group-item class along with some helper classes such as .d-flex class, .justify-content-between class, and .align-items-center class to the <li> element. The helper classes are used to provide proper alignment to the list items in a list group.
  • Add .badge class along with the .badge-primary class and .badge-pill class to the <span> element to add the badges into the list items.

Example

Output

list8.PNG

Pin It on Pinterest

Share This