...

Lists

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Morbi leo risus 1

List group flush

Skola 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="font-size-sm text-muted mb-0">
        We don't charge per seat, just per service.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft 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="font-size-sm text-muted mb-0">
        Our server network never goes down.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft 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="font-size-sm text-muted mb-0">
        We store all your data forever. No extra charge.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft 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="font-size-sm text-muted mb-0">
        Keep your communication and data safe.
      </p>

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

  </div>
</div>

List

Skola 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