DashByte - Premium Dashboard Template

Components

List Group

List groups are a flexible and powerful component for displaying a series of content. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

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.

An item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Active Item

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

An active item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item active">An active item</li>
  ...
</ul>

Disabled Item

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

A disabled item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item disabled">A disabled item</li>
  ...
</ul>

Links & Buttons

Use link tag or button to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

The current link item A second link item A third link item A fourth link item A disabled link item

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  ...
</div>

Numbered

Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items.

A list item
A list item
A list item

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

With Badge

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

A list item 14
A second list item 2
A third list item 1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>