List group

Lists of items, links or buttons, with active, disabled and theme states.

Bootstrap’s list group docs describe the markup and CSS.

Example

bsListGroupItem adds .list-group-item. active adds .active and aria-current="true".

An active item
A second item
A third item

HTML

<ul bsListGroup>
  <li bsListGroupItem active>An active item</li>
  <li bsListGroupItem>A second item</li>
  <li bsListGroupItem>A third item</li>
</ul>

Links and buttons

Links and buttons get the hover and focus styles of .list-group-item-action. disabled sets disabled on buttons, and aria-disabled and tabindex="-1" on links.

<div bsListGroup>
  @for (folder of folders; track folder) {
    <button
      type="button"
      bsListGroupItem
      [active]="selected() === folder"
      (click)="selected.set(folder)">
      {{ folder }}
    </button>
  }
  <button type="button" bsListGroupItem disabled>Archive</button>
</div>

Flush, numbered and themes

flush removes the outer borders, numbered numbers the items of an <ol>, and theme colors an item.

First
Second

Success
Warning
Danger

HTML

<div class="vstack gap-3">
  <ol bsListGroup numbered>
    <li bsListGroupItem>First</li>
    <li bsListGroupItem>Second</li>
  </ol>
  <ul bsListGroup flush>
    <li bsListGroupItem theme="success">Success</li>
    <li bsListGroupItem theme="warning">Warning</li>
    <li bsListGroupItem theme="danger">Danger</li>
  </ul>
</div>

Horizontal

Set horizontal to lay the items out in a row, or to a breakpoint to start from. The responsive variants use container queries, so wrap the list in .contains-inline.

An item
A second item
A third item

HTML

<div class="contains-inline">
  <ul bsListGroup horizontal="md">
    <li bsListGroupItem>An item</li>
    <li bsListGroupItem>A second item</li>
    <li bsListGroupItem>A third item</li>
  </ul>
</div>

API

BsListGroup

Selector: [bsListGroup]

Inputs

Name	Type	Default	Description
`flush`	`boolean`	`false`	Removes the outer borders and rounded corners.
`numbered`	`boolean`	`false`	Numbers the items.
`horizontal`	`boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`false`	Lays the items out in a row, from a breakpoint up.

BsListGroupItem

Selector: [bsListGroupItem]

Inputs

Name	Type	Default	Description
`active`	`boolean`	`false`	Marks the current selection.
`disabled`	`boolean`	`false`	Disables the item.
`theme`	`BsTheme \| null`	`null`	Theme color of the item.