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.

Flush

Goodkit Exclusive

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

  • Members per team
  • Data retention
  • Support
  • API Limiting
<ul class="list-group list-group-flush">
  <li class="list-group-item">
    Members per team
  </li>
  <li class="list-group-item">
    Data retention
  </li>
  <li class="list-group-item">
    Support
  </li>
  <li class="list-group-item">
    API Limiting
  </li>
</ul>

Sizing

Goodkit Exclusive

Easily control the size of the list group component with sizing utilities.

  • Members per team
  • Data retention
  • Support
  • API Limiting
<ul class="list-group list-group-lg">
  <li class="list-group-item">
    Members per team
  </li>
  <li class="list-group-item">
    Data retention
  </li>
  <li class="list-group-item">
    Support
  </li>
  <li class="list-group-item">
    API Limiting
  </li>
</ul>
  • Members per team
  • Data retention
  • Support
  • API Limiting
<ul class="list-group">
  <li class="list-group-item">
    Members per team
  </li>
  <li class="list-group-item">
    Data retention
  </li>
  <li class="list-group-item">
    Support
  </li>
  <li class="list-group-item">
    API Limiting
  </li>
</ul>
  • Members per team
  • Data retention
  • Support
  • API Limiting
<ul class="list-group list-group-sm">
  <li class="list-group-item">
    Members per team
  </li>
  <li class="list-group-item">
    Data retention
  </li>
  <li class="list-group-item">
    Support
  </li>
  <li class="list-group-item">
    API Limiting
  </li>
</ul>

Hover

Goodkit Exclusive

Combine .list-group-hover with .list-group-flush to add a shadow when you hover over list group items.

Floating Seat

First-come first-serve seating

$49/mo

Dedicated Desk

Desk in a community space

$99/mo

Small Office

2-10 person team offices

$299/mo
<div class="list-group list-group-flush list-group-hover">
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
</div>