List Group

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Basic list

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Design
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Active Item

Add .active to a .list-group-item to indicate the current active selection.

Design
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Disabled Items

Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

Design
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Links and buttons

Use <a> s or <button> s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action . We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li> s or <div> s) don’t provide a click or tap affordance.

Be sure to not use the standard .btn classes here .

Design
HTML

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

With <button> s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a> s don’t support the disabled attribute.

Design
HTML

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

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).

Design
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Numbered

Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol> s default browser styling) for better placement inside list group items and to allow for better customization.

Design
HTML

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
                              <li class="list-group-item">Cras justo odio</li>
                              <li class="list-group-item">Cras justo odio</li>
                              <li class="list-group-item">Cras justo odio</li>
                            </ol>

These work great with custom content as well.

Design
HTML

Subheading
Cras justo odio
14
Subheading
Cras justo odio
14
Subheading
Cras justo odio
14

<ol class="list-group list-group-numbered">
                              <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                  <div class="fw-bold">Subheading</div>
                                  Cras justo odio
                                </div>
                                <span class="badge bg-primary rounded-pill">14</span>
                              </li>
                              <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                  <div class="fw-bold">Subheading</div>
                                  Cras justo odio
                                </div>
                                <span class="badge bg-primary rounded-pill">14</span>
                              </li>
                              <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                  <div class="fw-bold">Subheading</div>
                                  Cras justo odio
                                </div>
                                <span class="badge bg-primary rounded-pill">14</span>
                              </li>
                            </ol>

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} to make a list group horizontal starting at that breakpoint’s min-width . Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

Design
HTML

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

 <ul class="list-group list-group-horizontal">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>
                            <ul class="list-group list-group-horizontal-sm">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>
                            <ul class="list-group list-group-horizontal-md">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>
                            <ul class="list-group list-group-horizontal-lg">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>
                            <ul class="list-group list-group-horizontal-xl">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>
                            <ul class="list-group list-group-horizontal-xxl">
                              <li class="list-group-item">An item</li>
                              <li class="list-group-item">A second item</li>
                              <li class="list-group-item">A third item</li>
                            </ul>

Checkboxes and radios

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label> s, but please remember to include an aria-label attribute and value for accessibility.

Design
HTML

First checkbox First checkbox
Second checkbox Second checkbox
Third checkbox Third checkbox
id="pills-tabContent-checkboxes-radios" Fourth checkbox
Fifth checkbox Fifth checkbox

	<ul class="list-group">
<li class="list-group-item">
	<label for="inputFormFirst" class="form-label visually-hidden">First checkbox</label>
	<input class="form-check-input me-1" id="inputFormFirst" name="inputFormFirst" type="checkbox" value="" aria-label="..." />
	First checkbox
</li>
<li class="list-group-item">
	<label for="inputFormSecond" class="form-label visually-hidden">Second checkbox</label>
	<input class="form-check-input me-1" id="inputFormSecond" name="inputFormSecond" type="checkbox" value="" aria-label="..." />
	Second checkbox
</li>
<li class="list-group-item">
	<label for="inputFormThird" class="form-label visually-hidden">Third checkbox</label>
	<input class="form-check-input me-1" id="inputFormThird" name="inputFormThird" type="checkbox" value="" aria-label="..." />
	Third checkbox
</li>
<li class="list-group-item">
	<label for="inputFormFourth" class="form-label visually-hidden">Fourth checkbox</label>
	<input class="form-check-input me-1" id="inputFormFourth" name="inputFormFourth" type="checkbox" value="" aria-label="..." />
	Fourth checkbox
</li>
<li class="list-group-item">
	<label for="inputFormFifth" class="form-label visually-hidden">Fifth checkbox</label>
	<input class="form-check-input me-1" id="inputFormFifth" name="inputFormFifth" type="checkbox" value="" aria-label="..." />
	Fifth checkbox
</li>
</ul>

Contextual classes

Use contextual classes to style list items with a stateful background and color.

Design
HTML

Dapibus ac facilisis in
This is a primary list group item
This is a secondary list group item
This is a success list group item
This is a danger list group item
This is a warning list group item
This is a info list group item
This is a light list group item
This is a dark list group item

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities .

Design
HTML

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge bg-primary ">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge bg-primary ">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge bg-primary ">1</span>
  </li>
</ul>

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities .

Design
HTML

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

First checkbox First checkbox
Second checkbox Second checkbox
Third checkbox Third checkbox
Fourth checkbox Fourth checkbox
Fifth checkbox Fifth checkbox

<ul class="list-group">
<li class="list-group-item">
	<label for="inputFormcheckbox" class="form-label visually-hidden">First checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheckbox" name="inputFormcheckbox" type="checkbox" value="" aria-label="..." />
	First checkbox
</li>
<li class="list-group-item">
	<label for="inputFormcheckbox1" class="form-label visually-hidden">Second checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheckbox1" name="inputFormcheckbox1" type="checkbox" value="" aria-label="..." />
	Second checkbox
</li>
<li class="list-group-item">
	<label for="inputFormcheckbox2" class="form-label visually-hidden">Third checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheckbox2" name="inputFormcheckbox2" type="checkbox" value="" aria-label="..." />
	Third checkbox
</li>
<li class="list-group-item">
	<label for="inputFormcheckbox3" class="form-label visually-hidden">Fourth checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheckbox3" name="inputFormcheckbox3" type="checkbox" value="" aria-label="..." />
	Fourth checkbox
</li>
<li class="list-group-item">
	<label for="inputFormcheckbox4" class="form-label visually-hidden">Fifth checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheckbox4" name="inputFormcheckbox4" type="checkbox" value="" aria-label="..." />
	Fifth checkbox
</li>
</ul>

And if you want <label> s as the .list-group-item for large hit areas, you can do that, too.

Design
HTML

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox

<div class="list-group">
<label class="list-group-item">
	<label for="inputFormcheck" class="form-label visually-hidden">First checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheck" name="inputFormcheck" type="checkbox" value="" />
	First checkbox
</label>
<label class="list-group-item">
	<label for="inputFormcheck1" class="form-label visually-hidden">Second checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheck1" name="inputFormcheck1" type="checkbox" value="" />
	Second checkbox
</label>
<label class="list-group-item">
	<label for="inputFormcheck2" class="form-label visually-hidden">Third checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheck2" name="inputFormcheck2" type="checkbox" value="" />
	Third checkbox
</label>
<label class="list-group-item">
	<label for="inputFormcheck3" class="form-label visually-hidden">Fourth checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheck3" name="inputFormcheck3" type="checkbox" value="" />
	Fourth checkbox
</label>
<label class="list-group-item">
	<label for="inputFormcheck4" class="form-label visually-hidden">Fifth checkbox</label>
	<input class="form-check-input me-1" id="inputFormcheck4" name="inputFormcheck4" type="checkbox" value="" />
	Fifth checkbox
</label>
</div>