Lists

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. Please read the official Bootstrap documentation for a full list of options.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Morbi leo risus 1
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Morbi leo risus 1

List group large Dashkit only

Increase the vertical padding of list group items with the .list-group-lg modifier.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group list-group-lg">
  <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>

List group focus Dashkit only

Changes the color of the .text-focus elements to $primary on .list-group-item focus event. Useful for clickable .list-group-item elements when navigating with a keyboard.

...

Airbnb

...

Medium Corporation

...

Homepage Redesign

<div class="list-group list-group-focus">
  <a class="list-group-item" href="#!">

    <!-- Title -->
    <h4 class="text-body text-focus mb-1">
      Item title
    </h4>

    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, eius quae, sint fugit obcaecati reprehenderit reiciendis soluta ab adipisci harum dolore beatae, nihil eaque architecto quas quasi aspernatur natus atque.
    </p>

  </a>
</div>

List.js Dashkit only Plugin

Create searchable, sortable, and filterable lists and tables with the simple but powerful List.js plugin. Either initialize List.js via JavaScript as suggested in the documentation, or use our custom data-list attribute to initialize it via HTML. Please read the official plugin documentation for a full list of options.

Add a member

    <div id="list" data-list='{"valueNames": ["name"], "page": 3, "pagination": {"paginationClass": "list-pagination"}}'>

      <!-- Search -->
      <input class="list-search" type="search">

      <!-- List -->
      <ul class="list">
        <li class="name">Casey Fyfe</li>
        <li class="name">Jane Roe</li>
        <li class="name">Casey Fyfe</li>
        <li class="name">Jane Roe</li>
      </ul>

      <!-- Pagination -->
      <ul class="list-pagination"></ul>

    </div>

    Timeline/activity Dashkit only

    Turn a list group into a timeline/activity list by adding a .list-group-acitivity modifier and/or modified avatars.

    Notification Timeline

    View all
    Launchday 1.4.0 update email sent

    Sent to all 1,851 subscribers over a 24 hour period

    2m ago
    Launchday 1.4.0 update email sent

    Sent to all 1,851 subscribers over a 24 hour period

    2m ago
    Launchday 1.4.0 update email sent

    Sent to all 1,851 subscribers over a 24 hour period

    2m ago
    <div class="list-group list-group-flush list-group-activity my-n3">
      <div class="list-group-item">
        <div class="row">
          <div class="col-auto">

            <!-- Avatar -->
            <div class="avatar avatar-sm">
              <div class="avatar-title fs-lg bg-primary-soft rounded-circle text-primary">
                <i class="fe fe-mail"></i>
              </div>
            </div>

          </div>
          <div class="col ms-n2">

            <!-- Heading -->
            <h5 class="mb-1">
              Launchday 1.4.0 update email sent
            </h5>

            <!-- Text -->
            <p class="small text-gray-700 mb-0">
              Sent to all 1,851 subscribers over a 24 hour period
            </p>

            <!-- Time -->
            <small class="text-muted">
              2m ago
            </small>

          </div>
        </div> <!-- / .row -->
      </div>
    </div>

    Activity List

    View all

    Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.

    2m ago

    Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.

    2m ago

    Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.

    2m ago
    <div class="list-group list-group-flush">
      <div class="list-group-item">
        <div class="row">
          <div class="col-auto">

            <!-- Avatar -->
            <div class="avatar avatar-sm">
              <div class="avatar-title fs-lg bg-primary-soft rounded-circle text-primary">
                <i class="fe fe-mail"></i>
              </div>
            </div>

          </div>
          <div class="col ms-n2">

            <!-- Heading -->
            <p class="small mb-0">
              <strong>Launchday Update email sent</strong> to 1,851 subscribers over a 24 hour period for maximum open and reply rates.
            </p>

            <!-- Time -->
            <small class="text-muted">
              2m ago
            </small>

          </div>
        </div> <!-- / .row -->
      </div>
    </div>