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 on this site for creating outstanding content!