# Bootstrap 6 List Group > Bootstrap List Groups allows displaying are a series of content. Learn how to use Bootstrap list group to build complex list structure on your website. ## Basic example The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required. ```html

An item
A second item
A third item
A fourth item
And a fifth one

``` ## Active items Attach `.active` to a `.list-group-item` to show the current active selection. ```html

An active item
A second item
A third item
A fourth item
And a fifth one

``` ## Disabled items Attach `.disabled` to a `.list-group-item` to make it appear disabled. Remark that some of the elements with `.disabled` will also require custom JavaScript to disable their click events (e.g., links). ```html

A disabled item
A second item
A third item
A fourth item
And a fifth one

``` ## Links and buttons Use ``s or ` ``` ## Flush Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). ```html

An item
A second item
A third item
A fourth item
And a fifth one

``` ## Numbered Add the `.list-group-numbered` modifier class (and optionally use an `

` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `

`s default browser styling) for better placement inside list group items and to allow for better customization. Numbers are generated by `counter-reset` on the `

`, and then styled and placed with a `::before` pseudo-element on the `

` with `counter-increment` and `content`. ```html
1. A list item
2. A list item
3. A list item
``` These work great with custom content as well. ```html
1. Subheading
  Content for list item
  14
2. Subheading
  Content for list item
  14
3. Subheading
  Content for list item
  14
``` ## Horizontal Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to turn horizontal from that breakpoint up. Currently **horizontal list groups cannot be combined with flush list groups.** The responsive variants measure the nearest [query container](https://coreui.io/bootstrap/docs/utilities/container-queries/), not the viewport, so a list group in a narrow column stays stacked while the same class in a wide one goes horizontal. Mark an ancestor with `.contains-inline` — without one the query has nothing to read and the direction never switches. Plain `.list-group-horizontal` needs no container. **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. ## Variants Colour a list item with a [`.theme-*` class](https://coreui.io/bootstrap/docs/customize/components/#theme-variants). It works on the item, on the `.list-group` above it, or on both — an item's own theme wins over the one it inherits. ```html
- A simple default list group item
- A simple ${c.name} list group item
``` Theme classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a themed list group item. ```html
A simple default list group item A simple ${c.name} list group item
``` > ##### Conveying meaning to assistive technologies > > Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the `.visually-hidden` class. ## With badges Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities](https://coreui.io/bootstrap/docs/utilities/flex/). ```html
- A list item 14
- A second list item 2
- A third list item 1
``` ## Custom content Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/). ```html

List group item heading
3 days ago

Some placeholder content in a paragraph.
And some small print.

List group item heading
3 days ago

Some placeholder content in a paragraph.
And some muted small print.

List group item heading
3 days ago

Some placeholder content in a paragraph.
And some muted small print.
``` ## Checkboxes and radios Place CoreUI for Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `
`s, but please remember to include an `aria-label` attribute and value for accessibility. ```html
- First checkbox
- Second checkbox
- Third checkbox
- Fourth checkbox
- Fifth checkbox
``` And if you want `
`s as the `.list-group-item` for large hit areas, you can do that, too. ```html
First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox
``` ## JavaScript behavior Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our list group to create tabbable panes of local content. ```html

Home Profile Messages Settings

...

...

...

...

``` ### Using data attributes You can activate a list group navigation without writing any JavaScript by simply specifying `data-coreui-toggle="list"` or on an element. Use these data attributes on `.list-group-item`. ```html

Home Profile Messages Settings

...

...

...

...

``` ### Via JavaScript Enable tabbable list item via JavaScript (each list item needs to be activated individually): ```js const triggerTabList = document.querySelectorAll('#myTab a') triggerTabList.forEach(triggerEl => { const tabTrigger = new coreui.Tab(triggerEl) triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) }) ``` You can activate individual list item in several ways: ```js const triggerEl = document.querySelector('#myTab a[href="#profile"]') coreui.Tab.getInstance(triggerEl).show() // Select tab by name const triggerFirstTabEl = document.querySelector('#myTab li:first-child a') coreui.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` ### Fade effect To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible. ```html

...

...

...

...

``` ### Methods #### constructor > #### Promises and transitions > > **Methods that show or hide a component return a promise.** The promise resolves when the transition ends, so `await` continues at the same moment a `shown.coreui.*` or `hidden.coreui.*` listener runs. The methods still return immediately and never block the caller. A call on a component that is already transitioning does nothing and resolves right away. > > [Refer to our JavaScript documentation for further details](https://coreui.io/bootstrap/docs/getting-started/javascript/#promises-and-transitions). Activates your content as a tab element. You can create a tab instance with the constructor, for example: ```js const cuiTab = new coreui.Tab('#myTab') ``` | Method | Description | | --- | --- | | `dispose` | Destroys an element's tab. | | `getInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, you can use it like this: `coreui.Tab.getInstance(element)`. | | `getOrCreateInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized You can use it like this: `coreui.Tab.getOrCreateInstance(element)`. | | `show` | Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns a promise that resolves after the tab pane is shown** (for example, after the `shown.coreui.tab` event occurs). | ### Events When showing a new tab, the events fire in the following order: 1. `hide.coreui.tab` (on the current active tab) 2. `show.coreui.tab` (on the to-be-shown tab) 3. `hidden.coreui.tab` (on the previous active tab, the same one as for the `hide.coreui.tab` event) 4. `shown.coreui.tab` (on the newly-active just-shown tab, the same one as for the `show.coreui.tab` event) If no tab was already active, the `hide.coreui.tab` and `hidden.coreui.tab` events will not be fired. | Event type | Description | | --- | --- | | `hidden.coreui.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. | | `hide.coreui.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. | | `show.coreui.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | | `shown.coreui.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | ```js const tabElms = document.querySelectorAll('a[data-coreui-toggle="list"]') tabElms.forEach(tabElm => { tabElm.addEventListener('shown.coreui.tab', event => { event.target // newly activated tab event.relatedTarget // previous active tab }) }) ``` ## Deprecated markup _Deprecated in 6.0.0._ The v5 spelling — `.list-group-item` with a colour modifier — still works and renders identically. Each colour class is generated from the same theme map as the class it replaces, so `.list-group-item-primary` *is* `.list-group-item.theme-primary`. They are removed in v7. ```html
- A simple ${c.name} list group item
``` ```diff -
Done
Done

List group item heading

List group item heading

List group item heading