List group

Basic List Group

Basic list group example.

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

HTML Code for this Element

<ul class="list-group">
  <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>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Active items

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

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

HTML Code for this Element

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Disabled items

Add .disabled to a .list-group-item to make it grayed out and unclickable.

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

HTML Code for this Element

<ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

Link items

Use <a> elements to create .list-group-item-action with active/selected states.

The current link item A second link item A third link item A fourth link item A disabled link item

HTML Code for this Element

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
      The current link item
    </a>
    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
    <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

List Group Buttons

Use <button> elements to create .list-group-item-action with active/selected states.

HTML Code for this Element

<div class="list-group">
	<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
		The current button
	</button>
	<button type="button" class="list-group-item list-group-item-action">A second button item</button>
	<button type="button" class="list-group-item list-group-item-action">A third button item</button>
	<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
	<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</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).

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

HTML Code for this Element

<ul class="list-group list-group-flush">
  <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>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

With Badges

Add badges to any list group.

A list item 14
A second list item 2
A third list item 8
Another list item 4
Another list item 2
Another list item 6
Another list item 5

HTML Code for this Element

<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A list item
	  <span class="badge text-bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A second list item
	  <span class="badge text-bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A third list item
	  <span class="badge text-bg-primary rounded-pill">8</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">4</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">6</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">5</span>
	</li>
</ul>

Custom content

Add nearly any HTML code within a list group. Check it out in this kitchen sink.

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.

HTML Code for this Element

<div class="list-group">
	<a href="#!" class="list-group-item list-group-item-action active" aria-current="true">
	  <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">Some placeholder content in a paragraph.</p>
	  <small>And some small print.</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-body-secondary">3 days ago</small>
	  </div>
	  <p class="mb-1">Some placeholder content in a paragraph.</p>
	  <small class="text-body-secondary">And some muted small print.</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-body-secondary">3 days ago</small>
	  </div>
	  <p class="mb-1">Some placeholder content in a paragraph.</p>
	  <small class="text-body-secondary">And some muted small print.</small>
	</a>
</div>

List Group Checkbox

Place checkboxes within the list group items.

First checkbox
Second checkbox
Third checkbox

HTML Code for this Element

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

List Group Radio

Add Radio within the list group items

First radio
Second radio
Third radio

HTML Code for this Element

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Numbered List Group

Add .list-group-numbered or use the ol element to opt into numbered list. You can spice it up with badges as well

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

HTML Code for this Element

<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>
		Content for list item
	  </div>
	  <span class="badge text-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>
		Content for list item
	  </div>
	  <span class="badge text-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>
		Content for list item
	  </div>
	  <span class="badge text-bg-primary rounded-pill">14</span>
	</li>
</ol>

Horizontal List Group

Add .list-group-horizontal to change orientation of list group items.

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

HTML Code for this Element

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