List group – List groups with different design

Component
Name	List group
Description	List groups with different design
Provider	Skin
Reference	getbootstrap.com - list group
Styling	For all possible color styles and corresponding examples, see colors.

Flush

Code

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

Result

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

Horizontal

Code

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

Result

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

With badges

Code

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Result

A list item 14
A second list item 2
A third list item 1

Contextual classes

Code

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
</ul>

Result

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item

Custom content

Code

<ul class="list-group">
  <li class="list-group-item 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">Some placeholder content in a paragraph.</p><small>And some small print.</small>
  </li>
  <li class="list-group-item">
    <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">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print.</small>
  </li>
  <li class="list-group-item">
    <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">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print.</small>
  </li>
</ul>

Result

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.

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!