Django List Group

Pro Component

List groups are a flexible and powerful component for displaying a series of content. With Django list group you can modify and extend them to support just about any content within.

Examples

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Active items

Add .active to a .list-group-item to indicate the current active selection.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="javascript:;" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="javascript:;" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="javascript:;" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="javascript:;" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="javascript:;" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

With badges

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Advanced Examples

Here are some more advanced custom examples we’ve made in order to bring more functionality with some really cool list group examples.

Members

John Michael
● Online
Alex Smith
● In a meeting
Samantha Ivy
● Offline
John Michael
● Online
John Snow
● Online

<ul class="list-group list-group-flush list my--3">
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
            </a>
         </div>
         <div class="col ml--2">
            <h4 class="mb-0">
               <a href="javascript:;">John Michael</a>
            </h4>
            <span class="text-success">●</span>
            <small>Online</small>
         </div>
         <div class="col-auto">
            <button type="button" class="btn btn-sm btn-primary">Add</button>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
            </a>
         </div>
         <div class="col ml--2">
            <h4 class="mb-0">
               <a href="javascript:;">Alex Smith</a>
            </h4>
            <span class="text-warning">●</span>
            <small>In a meeting</small>
         </div>
         <div class="col-auto">
            <button type="button" class="btn btn-sm btn-primary">Add</button>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
            </a>
         </div>
         <div class="col ml--2">
            <h4 class="mb-0">
               <a href="javascript:;">Samantha Ivy</a>
            </h4>
            <span class="text-danger">●</span>
            <small>Offline</small>
         </div>
         <div class="col-auto">
            <button type="button" class="btn btn-sm btn-primary">Add</button>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
            </a>
         </div>
         <div class="col ml--2">
            <h4 class="mb-0">
               <a href="javascript:;">John Michael</a>
            </h4>
            <span class="text-success">●</span>
            <small>Online</small>
         </div>
         <div class="col-auto">
            <button type="button" class="btn btn-sm btn-primary">Add</button>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-5.jpg">
            </a>
         </div>
         <div class="col ml--2">
            <h4 class="mb-0">
               <a href="javascript:;">John Snow</a>
            </h4>
            <span class="text-success">●</span>
            <small>Online</small>
         </div>
         <div class="col-auto">
            <button type="button" class="btn btn-sm btn-primary">Add</button>
         </div>
      </div>
   </li>
</ul>

Checklist

Call with Dave
10:30 AM
Lunch meeting
10:30 AM
Argon Dashboard Launch
10:30 AM
Winter Hackaton
10:30 AM
Dinner with Family
10:30 AM

<ul class="list-group list-group-flush" data-toggle="checklist">
   <li class="checklist-entry list-group-item flex-column align-items-start py-4 px-4">
      <div class="checklist-item checklist-item-success">
         <div class="checklist-info">
            <h5 class="checklist-title mb-0">Call with Dave</h5>
            <small>10:30 AM</small>
         </div>
         <div>
            <div class="custom-control custom-checkbox custom-checkbox-success">
               <input class="custom-control-input" id="chk-todo-task-1" type="checkbox" checked>
               <label class="custom-control-label" for="chk-todo-task-1"></label>
            </div>
         </div>
      </div>
   </li>
   <li class="checklist-entry list-group-item flex-column align-items-start py-4 px-4">
      <div class="checklist-item checklist-item-warning">
         <div class="checklist-info">
            <h5 class="checklist-title mb-0">Lunch meeting</h5>
            <small>10:30 AM</small>
         </div>
         <div>
            <div class="custom-control custom-checkbox custom-checkbox-warning">
               <input class="custom-control-input" id="chk-todo-task-2" type="checkbox">
               <label class="custom-control-label" for="chk-todo-task-2"></label>
            </div>
         </div>
      </div>
   </li>
   <li class="checklist-entry list-group-item flex-column align-items-start py-4 px-4">
      <div class="checklist-item checklist-item-info">
         <div class="checklist-info">
            <h5 class="checklist-title mb-0">Argon Dashboard Launch</h5>
            <small>10:30 AM</small>
         </div>
         <div>
            <div class="custom-control custom-checkbox custom-checkbox-info">
               <input class="custom-control-input" id="chk-todo-task-3" type="checkbox">
               <label class="custom-control-label" for="chk-todo-task-3"></label>
            </div>
         </div>
      </div>
   </li>
   <li class="checklist-entry list-group-item flex-column align-items-start py-4 px-4">
      <div class="checklist-item checklist-item-danger">
         <div class="checklist-info">
            <h5 class="checklist-title mb-0">Winter Hackaton</h5>
            <small>10:30 AM</small>
         </div>
         <div>
            <div class="custom-control custom-checkbox custom-checkbox-danger">
               <input class="custom-control-input" id="chk-todo-task-4" type="checkbox" checked>
               <label class="custom-control-label" for="chk-todo-task-4"></label>
            </div>
         </div>
      </div>
   </li>
   <li class="checklist-entry list-group-item flex-column align-items-start py-4 px-4">
      <div class="checklist-item checklist-item-success">
         <div class="checklist-info">
            <h5 class="checklist-title mb-0">Dinner with Family</h5>
            <small>10:30 AM</small>
         </div>
         <div>
            <div class="custom-control custom-checkbox custom-checkbox-success">
               <input class="custom-control-input" id="chk-todo-task-5" type="checkbox" checked>
               <label class="custom-control-label" for="chk-todo-task-5"></label>
            </div>
         </div>
      </div>
   </li>
</ul>

Progress

Argon Design System
Angular Now UI Kit PRO
Black Dashboard
React Material Dashboard
Vue Paper UI Kit PRO

<ul class="list-group list-group-flush list my--3">
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
            </a>
         </div>
         <div class="col">
            <h5>Argon Design System</h5>
            <div class="progress progress-xs mb-0">
               <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
            </div>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
            </a>
         </div>
         <div class="col">
            <h5>Angular Now UI Kit PRO</h5>
            <div class="progress progress-xs mb-0">
               <div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
            </div>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
            </a>
         </div>
         <div class="col">
            <h5>Black Dashboard</h5>
            <div class="progress progress-xs mb-0">
               <div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
            </div>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
            </a>
         </div>
         <div class="col">
            <h5>React Material Dashboard</h5>
            <div class="progress progress-xs mb-0">
               <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
            </div>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/vue.jpg">
            </a>
         </div>
         <div class="col">
            <h5>Vue Paper UI Kit PRO</h5>
            <div class="progress progress-xs mb-0">
               <div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
            </div>
         </div>
      </div>
   </li>
</ul>

Messages

Tim

2 hrs ago

New order for Argon Dashboard

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Mike

1 day ago

● Your theme has been updated

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Tim

2 hrs ago

New order for Argon Dashboard

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group list-group-flush">
   <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start py-4 px-4">
      <div class="d-flex w-100 justify-content-between">
         <div>
            <div class="d-flex w-100 align-items-center">
               <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2" />
               <h5 class="mb-1">Tim</h5>
            </div>
         </div>
         <small>2 hrs ago</small>
      </div>
      <h4 class="mt-3 mb-1"> New order for Argon Dashboard</h4>
      <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
   </a>
   <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start py-4 px-4">
      <div class="d-flex w-100 justify-content-between">
         <div>
            <div class="d-flex w-100 align-items-center">
               <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2" />
               <h5 class="mb-1">Mike</h5>
            </div>
         </div>
         <small>1 day ago</small>
      </div>
      <h4 class="mt-3 mb-1"><span class="text-info">●</span> Your theme has been updated</h4>
      <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
   </a>
   <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start py-4 px-4">
      <div class="d-flex w-100 justify-content-between">
         <div>
            <div class="d-flex w-100 align-items-center">
               <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" alt="Image placeholder" class="avatar avatar-xs mr-2" />
               <h5 class="mb-1">Tim</h5>
            </div>
         </div>
         <small>2 hrs ago</small>
      </div>
      <h4 class="mt-3 mb-1"> New order for Argon Dashboard</h4>
      <p class="text-sm mb-0">Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
   </a>
</div>

Notifications

John Snow

2 hrs ago

Let's meet at Starbucks at 11:30. Wdyt?

John Snow

3 hrs ago

A new issue has been reported for Argon.

John Snow

5 hrs ago

Your posts have been liked a lot.

<div class="list-group list-group-flush">
   <a href="javascript:;" class="list-group-item list-group-item-action">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" class="avatar rounded-circle">
         </div>
         <div class="col ml--2">
            <div class="d-flex justify-content-between align-items-center">
               <div>
                  <h4 class="mb-0 text-sm">John Snow</h4>
               </div>
               <div class="text-right text-muted">
                  <small>2 hrs ago</small>
               </div>
            </div>
            <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
         </div>
      </div>
   </a>
   <a href="javascript:;" class="list-group-item list-group-item-action">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" class="avatar rounded-circle">
         </div>
         <div class="col ml--2">
            <div class="d-flex justify-content-between align-items-center">
               <div>
                  <h4 class="mb-0 text-sm">John Snow</h4>
               </div>
               <div class="text-right text-muted">
                  <small>3 hrs ago</small>
               </div>
            </div>
            <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
         </div>
      </div>
   </a>
   <a href="javascript:;" class="list-group-item list-group-item-action">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Avatar -->
            <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" class="avatar rounded-circle">
         </div>
         <div class="col ml--2">
            <div class="d-flex justify-content-between align-items-center">
               <div>
                  <h4 class="mb-0 text-sm">John Snow</h4>
               </div>
               <div class="text-right text-muted">
                  <small>5 hrs ago</small>
               </div>
            </div>
            <p class="text-sm mb-0">Your posts have been liked a lot.</p>
         </div>
      </div>
   </a>
</div>

Countries

Country:
United States

Visits:
2500

Bounce:
30%
Country:
Germany

Visits:
2500

Bounce:
30%
Country:
Great Britain

Visits:
2500

Bounce:
30%

<ul class="list-group list-group-flush list my--3">
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Country flag -->
            <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/US.png" alt="Country flag" />
         </div>
         <div class="col">
            <small>Country:</small>
            <h5 class="mb-0">United States</h5>
         </div>
         <div class="col">
            <small>Visits:</small>
            <h5 class="mb-0">2500</h5>
         </div>
         <div class="col">
            <small>Bounce:</small>
            <h5 class="mb-0">30%</h5>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Country flag -->
            <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/DE.png" alt="Country flag" />
         </div>
         <div class="col">
            <small>Country:</small>
            <h5 class="mb-0">Germany</h5>
         </div>
         <div class="col">
            <small>Visits:</small>
            <h5 class="mb-0">2500</h5>
         </div>
         <div class="col">
            <small>Bounce:</small>
            <h5 class="mb-0">30%</h5>
         </div>
      </div>
   </li>
   <li class="list-group-item px-0">
      <div class="row align-items-center">
         <div class="col-auto">
            <!-- Country flag -->
            <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/GB.png" alt="Country flag" />
         </div>
         <div class="col">
            <small>Country:</small>
            <h5 class="mb-0">Great Britain</h5>
         </div>
         <div class="col">
            <small>Visits:</small>
            <h5 class="mb-0">2500</h5>
         </div>
         <div class="col">
            <small>Bounce:</small>
            <h5 class="mb-0">30%</h5>
         </div>
      </div>
   </li>
</ul>