Bootstrap 5 List Group

Bootstrap 5 List Group

Bootstrap 5 list group is basically an unordered list with list items.

Example

Steps: to create bootstrap 5 list group:

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: To create a list group, you have to assign .list-group to the list group container while assign .list-group-item to the child element of list group container

List Group: Active Item

To display active item of list group, add .active to the list item having .list-group-item.

Example

  • Learn HTML
  • Learn CSS
  • Learn Bootstrap

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: To create active list-item ,assign .active to the list-item base class.

List Group: Disabled Item

To make disabled list item add .disabled to the list item having .list-group-item.

Example

  • HTML(Disabled)
  • CSS
  • Bootstrap

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example,.disabled is assigned to the list-item base class to create a disabled list item.

List Group: Linked Items

Steps to create bootstrap 5 actionable list item.

  • To create actionable list group items, use <div> in place of <ul> and <a> in place of <li>.
  • Assign .list-group to the <div> base class.
  • Assign .list-group-item to the <a> base class.
  • Assign .list-group-item to the <a> base class.
  • If you want to make grey background color on hover the list item then add .list-group-item-action to the element having list-group-item class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

List Group With Linked Items

Code Explanation

Note:In this example, an actionable list item has been created by applying above mentioned steps.

List Group: Active Linked Item

To create active actionable list item, use .active class to <a> element base class.it will remove hover effect of actionable list item.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, an active actionable list item has been created by assigning .active to the <a> element base class.

List Group: Disabled Linked Item

To create disabled actionable list item, use .disabled class to <a> element base class.it will remove hover effect of actionable list item.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, disabled actionable list item has been created by assigning .disabled to the <a> element base class.

Flush / Remove Borders

Apply .list-group-flush to the <ul> element base class that remove some borders and rounded corners of the list items.

Source Code

Try it now

Code Explanation

Note: Bootstrap list group flush is used to remove some corners and borders of the list items.

Horizontal List Group

To create horizontal list group ,add .list-group-horizontal to the <ul> element base class.Horizontal list can also be created with respect to device breakpoint.You have to use .list-group-horizontal-{sm|md|lg|xl} class to <ul> element base class that make a list group horizontal starting at that breakpont's min-width.

Use .flex-fill class to every list item to make equal width of horizontal list item.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Horizontal list group is created by assigning either .list-group-horizontal or list-group-horizontal-{sm|md|lg|xl} to the list group container(<ul>) base class.

List Group: Contextual Classes

Bootstrap provides contextual class that provides additional color as well as background color to the list item.

Followings are the contextual classes that is very useful for coloring the list item. These are .list-group-item-success,.list-group-item-secondary ,.list-group-item-info,.list-group-item-warning,.list-group-item-danger , .list-group-item-dark and .list-group-item-light.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

List Group Contextual Classes

  • Tutorials
  • Web Design
  • Graphics Design
  • App Design

Code Explanation

Note: To provide different background colors to the list group, use list group, contextual classes.

List Group: Link items with Contextual Classes

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Assign List group contextual class to the linked item base class to provide different background colors to the list item.

Bootstrap 5 List Group With Badges

Combine .badge classes with utility/helper classes to add badges inside the list group. Adding .badge with additional helper classes to the badges inside list group, to creates List group with badges.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above mention concept to assign badge inside the list group.

Online Test / Quiz