YouTip

Bootstrap 5 List Group is a component used to display a series of items or content, commonly used to display navigation, tags, menus, or other similar list forms. The list group component provides a flexible way to display ordered or unordered content, allowing customization of each item's style, interaction, and layout. ### Basic Structure Bootstrap 5 List Group consists of the following parts: * **`.list-group`**: Container for wrapping the entire list. * **`.list-group-item`**: Each list item, usually containing text, links, or other content. * **`.list-group-item-action`**: Makes list items clickable, commonly used to create interactive lists. * **`.list-group-item-primary`**, etc.: Used to add different background colors or other styles to list items. Most basic list groups are unordered. !(#) To create a list group, you can add the .list-group class to the

element, and the .list-group-item class to the
• element: ## Example
  • First Item
  • Second Item
  • Third Item
  [Try it »](#) * * * ## Active List Item Add the .active class to set the active list item: ## Example
  • Active List Item
  • Second Item
  • Third Item
  [Try it »](#) * * * ## Disabled List Item The .disabled class is used to set a disabled list item: ## Example
  • Disabled Item
  • Second Item
  • Third Item
  [Try it »](#) * * * ## Linked List Items To create linked list items, replace
  with
  , and with
  . If you want a gray background on hover, add the .list-group-item-action class: ## Example
  First ItemSecond ItemThird Item
  [Try it »](#) * * * ## Remove List Borders Use the .list-group-flush class to remove borders and rounded corners from the list: ## Example
  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  [Try it »](#) * * * ## Horizontal List Group We can add the .list-group-horizontal class after the .list-group class to create a horizontal list group: ## Example
  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  [Try it »](#) * * * ## List Items with Multiple Colors !(#) The list item colors can be set using the following classes: .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: ## Example
  • Success List Item
  • Secondary List Item
  • Info List Item
  • Warning List Item
  • Danger List Item
  • Primary List Item
  • Dark List Item
  • Light List Item
  [Try it »](#) ### Linked List Items with Multiple Colors ## Example <div class
  ← Bootstrap5 DropdownsBootstrap5 Spinners →