## 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 group on Bootstrap

#### Basic Example

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

- News Feed
- Messages
- Events
- Groups
- Pages

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

News Feed Messages Events Groups Pages

#### List group flush

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

- Messages
- Events
- Groups
- Pages

#### List group with badge

    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-phoenix badge-phoenix-primary rounded-pill">14</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-phoenix badge-phoenix-primary rounded-pill">2</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-phoenix badge-phoenix-primary rounded-pill">1</span></li>
      <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-phoenix badge-phoenix-primary rounded-pill">9</span></li>
    </ul>

- Messages14
- Events2
- Groups1
- Pages9

#### List group background

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

- 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

#### 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 active" href="#!">
        <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
          <h5 class="mb-1">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-body-tertiary text-opacity-85">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-body-tertiary text-opacity-85">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-body-tertiary text-opacity-85">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-body-tertiary text-opacity-85">An ordered list</small>
      </a>
    </div>

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

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize