### 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

News Feed Messages Events Groups Pages

    <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-subtle-primary rounded-pill">14</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-subtle-primary rounded-pill">2</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-subtle-primary rounded-pill">1</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-subtle-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

##### List group · Bootstrap

3 days ago

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.

The most basic list group

##### What is list group?

3 days ago

Creating List Groups with Bootstrap. The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.

Donec id elit non mi porta.

##### What is ordered list?

3 days ago

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.

An ordered list

    <div class="list-group"><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4 active" href="#" data-bs-theme="light">
        <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-500 dark__text-500">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-500 dark__text-500">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-500 dark__text-500">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-500 dark__text-500">An ordered list</small>
      </a></div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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