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.

List on Bootstrap
Basic Example
  • News Feed
  • Messages
  • Events
  • Groups
  • Pages
<ul class="list-group">
  <li class="list-group-item">News Feed</li>
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
Active Item
<div class="list-group"><a class="list-group-item list-group-item-action active" href="#">News Feed</a>
  <a class="list-group-item list-group-item-action" href="#">Messages</a>
  <a class="list-group-item list-group-item-action" href="#">Events</a>
  <a class="list-group-item list-group-item-action" href="#">Groups</a>
  <a class="list-group-item list-group-item-action disabled" href="#">Pages</a>
</div>
List group flush
  • Messages
  • Events
  • Groups
  • Pages
<ul class="list-group list-group-flush">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
List group with badge
  • Messages14
  • Events2
  • Groups1
  • Pages9
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-soft-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-soft-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-soft-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-soft-primary rounded-pill">9</span></li>
</ul>
List group background
  • Example with background
  • 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
<ul class="list-group">
  <li class="list-group-item py-3">Example with background</li>
  <li class="list-group-item list-group-item-primary py-3">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary py-3">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success py-3">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger py-3">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning py-3">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info py-3">A simple info list group item</li>
  <li class="list-group-item list-group-item-light py-3">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark py-3">A simple dark list group item</li>
</ul>
List group with Link
<div class="list-group"><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4 light active" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1 text-white">List group · Bootstrap</h5><small>3 days ago</small>
    </div>
    <p class="mb-1">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. </p><small> The most basic list group</small>
  </a><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is list group?</h5><small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Creating List Groups with Bootstrap. The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.</p><small class="text-muted">Donec id elit non mi porta.</small>
  </a><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is ordered list?</h5><small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.</p><small class="text-muted">An ordered list</small>
  </a></div>

Thank you for creating with Falcon |
2022 © Themewagon

v3.14.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize