List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Bootstrap documentation

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
The current link item A second link item A third link item A fourth link item A disabled link item
  1. A list item
  2. A list item
  3. A list item
  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
  • An item
  • A second item
  • A third item
  • 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
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
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 A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item
  • A list item 14
  • A second list item 2
  • A third list item 1
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.

List group flush

Landkit only

Remove borders and horizontal paddings with a .list-group-flush component.

Unlimited users. One price.

We don't charge per seat, just per service.

Guaranteed 100% uptime

Our server network never goes down.

Lifetime storage *

We store all your data forever. No extra charge.

256-bit encryption

Keep your communication and data safe. 

<div class="list-group list-group-flush">
  <div class="list-group-item d-flex align-items-center">
    
    <!-- Text -->
    <div class="me-auto">
      
      <!-- Heading -->
      <p class="fw-bold mb-1">
        Unlimited users. One price.
      </p>

      <!-- Text -->
      <p class="fs-sm text-body-secondary mb-0">
        We don't charge per seat, just per service.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle bg-success-subtle ms-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->                
    <div class="me-auto">
      
      <!-- Heading -->
      <p class="fw-bold mb-1">
        Guaranteed 100% uptime
      </p>

      <!-- Text -->
      <p class="fs-sm text-body-secondary mb-0">
        Our server network never goes down.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle bg-success-subtle ms-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->
    <div class="me-auto">
      
      <!-- Heading -->
      <p class="fw-bold mb-1">
        Lifetime storage *
      </p>

      <!-- Text -->
      <p class="fs-sm text-body-secondary mb-0">
        We store all your data forever. No extra charge.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle bg-success-subtle ms-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->
    <div class="me-auto">
      
      <!-- Heading -->
      <p class="fw-bold mb-1">
        256-bit encryption
      </p>

      <!-- Text -->
      <p class="fs-sm text-body-secondary mb-0">
        Keep your communication and data safe.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle bg-success-subtle ms-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
</div>

List

Landkit only

Creates a simple styled list of links. 

<ul class="list mb-0">
  <li class="list-item">
    <a class="list-link" href="background.html">Background</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="borders.html">Borders</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="images.html">Images</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="lift.html">Lift</a>
  </li>
</ul>
<ul class="card-list list mb-0">
  <li class="list-item active">
    <a class="list-link" href="background.html">Background</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="borders.html">Borders</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="images.html">Images</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="lift.html">Lift</a>
  </li>
</ul>
Jump to