A simple primary alert—check it out!

A simple secondary alert—check it out!

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Danger Will Robinson! This is a dismissable alert!

Holy guacamole! Notice how the text/UI have high contrast?

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!


                    <textarea class="form-control" data-toggle="autosize" rows="1" placeholder="Try typing something..."></textarea>

Sizing

Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.


                    <div class="avatar avatar-xxl">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Status Indicator

Add an online or offline status indicator to show user's availability.


                    <div class="avatar avatar-online">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-offline">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Shape

Change the shape of an avatar with the default Bootstrap image classes.


                    <div class="avatar">
  <img src="../assets/img/avatars/projects/project-4.jpg" alt="..." class="avatar-img rounded">
</div>

<div class="avatar">
  <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Ratio

Change the proportional relationship between the width and height of an avatar to 4 by 3 with an .avatar-4by3 modifier.


                    <div class="avatar avatar-lg avatar-4by3">
  <img src="../assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
</div>

Initials

You won't always have an image for every user, so easily use initials instead.


                    <div class="avatar avatar-xxl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xl">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-lg">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-sm">
  <span class="avatar-title rounded-circle">CF</span>
</div>

<div class="avatar avatar-xs">
  <span class="avatar-title rounded-circle">CF</span>
</div>

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an <a> to link to the corresponding profile.


                    <div class="avatar-group">
  <div class="avatar">
    <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle">CF</span>
  </div>
</div>

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Soft Dashkit only

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap's core badges, including modiying classes like .badge-pill, as an <a> itself, or inside of <button> or <a> elements.

Primary Secondary Success Info Warning Danger Light Dark


                    <span class="badge badge-soft-primary">Primary</span>
<span class="badge badge-soft-secondary">Secondary</span>
<span class="badge badge-soft-success">Success</span>
<span class="badge badge-soft-info">Info</span>
<span class="badge badge-soft-warning">Warning</span>
<span class="badge badge-soft-danger">Danger</span>
<span class="badge badge-soft-light">Light</span>
<span class="badge badge-soft-dark">Dark</span>

Active Radio Radio

White Dashkit only

Creates a white variation of a button since Bootstrap's native "light" variant doesn't work well over light backgrounds.


                    <button class="btn btn-white">
  Button white
</button>

Rounded circle Dashkit only

Useful for single character or emoji buttons, you can turn any button into a circle using the .btn-rounded-circle modifier.


                    <button class="btn btn-sm btn-rounded-circle btn-white">+</button>
<button class="btn btn-rounded-circle btn-white">+</button>
<button class="btn btn-lg btn-rounded-circle btn-white">+</button>

Icon Dashkit only

A combination of the standard button component and a feather icon.


                    <button class="btn btn-white">
  <span class="fe fe-bookmark"></span>
</button>

<button class="btn btn-primary">
  <span class="fe fe-bookmark"></span>
</button>

<button class="btn btn-rounded-circle btn-white">
  <span class="fe fe-star"></span>
</button>

<button class="btn btn-rounded-circle btn-primary">
  <span class="fe fe-star"></span>
</button>

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Card header Dashkit only

Easily create a card header of a fixed height and populate it with text, buttons, or a navigation.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.


                    <div class="card">
  <div class="card-header">
    
    <h4 class="card-header-title">
      Card title
    </h4>
    
  </div>
</div>

Card header navigation Dashkit only

Use the default Bootstrap grid and the .nav component to easily add a perfectly aligned navigation inside a card header.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempora architecto, sit a repellat dignissimos consequatur mollitia qui consequuntur recusandae numquam voluptate maiores, non cumque illo laboriosam sint dolores. Nostrum.


                    <div class="card">
  <div class="card-header">

    <h4 class="card-header-title mr-auto">
      Card title
    </h4>

    <ul class="nav nav-tabs nav-tabs-sm card-header-tabs">
      <li class="nav-item">
        <a href="#!" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#!" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#!" class="nav-link">Link</a>
      </li>
    </ul>

  </div>
</div>

Inactive Dashkit only

Merge your card into a background with the .card-inactive modifier.


                    <div class="card card-inactive">
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempora architecto, sit a repellat dignissimos consequatur mollitia qui consequuntur recusandae numquam voluptate maiores, non cumque illo laboriosam sint dolores. Nostrum.
  </div>
</div>

Fill Dashkit only New

Make a card fill the whole available space to fit the height of a neighboring card with a .card-fill modifier.

Traffic Channels

All
Direct

Weekly Sales

$24,500 +3.5%

Orders Placed

763.5

Conversion Rate

84.5%

Avg. Order VaLue

$85.50


                    <div class="card card-fill">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-sm">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-md">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-lg">
  <div class="card-body">...</div>
</div>

<div class="card card-fill-xl">
  <div class="card-body">...</div>
</div>

Adjust Dashkit only New

Make a card vertically shrink (with a scrollbar) to match the height of its neighboring card with a .card-adjust modifier.

Recent Activity

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

Launchday 1.4.0 update email sent

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

2m ago

Page Title	Pageviews	Pageview %	Time/Page
Homepage	97,028	35.5%	2:14	Action Another action Something else here
Blog	7,283	9.7%	1:53	Action Another action Something else here
My Account	5,782	6.7%	2:03	Action Another action Something else here
Why Dashkit?	5,012	5.9%	0:45	Action Another action Something else here
Documentation	2,230	2.4%	6:10	Action Another action Something else here

Profile Dashkit only

Combine the default Bootstrap and Dashkit components to create beautiful large and small profile cards.

Ab Hadley

Woprking on the latest API integration.

UX Team Research Team

● Online


                    <div class="card">

  <!-- Dropdown -->
  <div class="dropdown card-dropdown">
    <a href="#!" class="dropdown-ellipses dropdown-toggle text-white" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fe fe-more-vertical"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-right">
      <a href="#!" class="dropdown-item">
        Action
      </a>
      <a href="#!" class="dropdown-item">
        Another action
      </a>
      <a href="#!" class="dropdown-item">
        Something else here
      </a>
    </div>
  </div>

  <!-- Image -->
  <img src="../assets/img/covers/profile-cover-2.jpg" alt="..." class="card-img-top">

  <!-- Body -->
  <div class="card-body text-center">

    <!-- Image -->
    <a href="profile-posts.html" class="avatar avatar-xl card-avatar card-avatar-top">
      <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle border border-4 border-card" alt="...">
    </a>

    <!-- Heading -->
    <h2 class="card-title">
      <a href="profile-posts.html">Ab Hadley</a>
    </h2>

    <!-- Text -->
    <p class="small text-muted mb-3">
      Woprking on the latest API integration.
    </p>

    <!-- Badges -->
    <p class="card-text">
      <span class="badge badge-soft-secondary">
        UX Team
      </span>
      <span class="badge badge-soft-secondary">
        Research Team
      </span>
    </p>

  </div>

  <!-- Footer -->
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center justify-content-between">
      <div class="col-auto">

        <!-- Status -->
        <small>
          <span class="text-success">●</span> Online
        </small>

      </div>
      <div class="col-auto">

        <!-- Link -->
        <a href="#!" class="btn btn-sm btn-primary">
          Subscribe
        </a>

      </div>
    </div>
  </div>

</div>

Dianna Smiley

You either die Spongebob or you live long enough to...

● Online


                    <div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="profile-posts.html" class="avatar avatar-lg">
          <img src="assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </a>

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

        <!-- Title -->
        <h4 class="mb-1">
          <a href="profile-posts.html">Dianna Smiley</a>
        </h4>

        <!-- Text -->
        <p class="small text-muted mb-1">
          You either die Spongebob or you live long enough to...
        </p>

        <!-- Status -->
        <p class="small mb-0">
          <span class="text-success">●</span> Online
        </p>

      </div>
      <div class="col-auto">

        <!-- Button -->
        <a href="#!" class="btn btn-sm btn-primary d-none d-md-inline-block">
          Subscribe
        </a>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

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

Team Dashkit only

A similar to profile cards team component compiled of the default Bootstrap and Dashkit components.

Launchday

Launchday is a SaaS website builder with a focus on quality, easy to build product sites.

Updated 2hr ago


                    <div class="card">
  <div class="card-body text-center">

    <!-- Dropdown -->
    <div class="dropdown card-dropdown">
      <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fe fe-more-vertical"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        <a href="#!" class="dropdown-item">
          Action
        </a>
        <a href="#!" class="dropdown-item">
          Another action
        </a>
        <a href="#!" class="dropdown-item">
          Something else here
        </a>
      </div>
    </div>

    <!-- Image -->
    <a href="team-overview.html" class="card-avatar avatar avatar-lg mx-auto">
      <img src="../assets/img/avatars/teams/team-logo-1.jpg" alt="" class="avatar-img rounded">
    </a>

    <!-- Heading -->
    <h2 class="mb-3">
      <a href="team-overview.html">Launchday</a>
    </h2>

    <!-- Text -->
    <p class="card-text text-muted">
      Launchday is a SaaS website builder with a focus on quality, easy to build product sites.
    </p>

  </div>
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center">
      <div class="col">

        <!-- Text -->
        <small class="text-muted">
          <i class="fe fe-clock"></i> Updated 2hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-5.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <div class="avatar avatar-xs">
            <div class="avatar-title rounded-circle">+7</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Launchday

Launchday is a SaaS website builder with a focus on quality, easy to build product sites.

Updated 2hr ago


                    <div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Image -->
        <a href="project-team-overview.html" class="avatar avatar-lg">
          <img src="../assets/img/avatars/teams/team-logo-1.jpg" alt="..." class="avatar-img rounded">
        </a>

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

        <!-- Heading -->
        <h4 class="mb-1">
          <a href="team-overview.html">Launchday</a>
        </h4>

        <!-- Text -->
        <p class="small text-muted mb-1">
          Launchday is a SaaS website builder with a focus on quality, easy to build product sites.
        </p>

        <!-- Time -->
        <small class="text-muted">
          <i class="fe fe-clock"></i> Updated 2hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group d-none d-md-inline-flex">
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs">
            <img src="../assets/img/avatars/profiles/avatar-5.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Project Dashkit only

Another combination of the default Bootstrap and Dashkit components that scales perfectly to look good on screens of any size.

Homepage Redesign

Updated 4hr ago

29%


                    <div class="card">

  <!-- Image -->
  <a href="project-overview.html">
    <img src="assets/img/avatars/projects/project-1.jpg" alt="..." class="card-img-top">
  </a>

  <!-- Body -->
  <div class="card-body mt-0">
    <div class="row align-items-center">
      <div class="col">

        <!-- Title -->
        <h4 class="mb-2">
          <a href="project-overview.html">Homepage Redesign</a>
        </h4>

        <!-- Subtitle -->
        <small class="text-muted">
          Updated 4hr ago
        </small>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

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

  <!-- Footer -->
  <div class="card-footer card-footer-boxed">
    <div class="row align-items-center">
      <div class="col">
        <div class="row align-items-center no-gutters">
          <div class="col-auto">

            <!-- Value -->
            <small class="mr-2">29%</small>

          </div>
          <div class="col">

            <!-- Progress -->
            <div class="progress progress-sm">
              <div class="progress-bar" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

          </div>
        </div> <!-- / .row -->
      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="assets/img/avatars/profiles/avatar-5.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

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

</div>

Homepage Redesign

Updated 2hr ago

29%


                    <div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="project-overview.html" class="avatar avatar-lg avatar-4by3">
          <img src="assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
        </a>

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

        <!-- Title -->
        <h4 class="mb-1">
          <a href="project-overview.html">Homepage Redesign</a>
        </h4>

        <!-- Text -->
        <p class="small text-muted mb-1">
          <time datetime="2018-06-21">Updated 2hr ago</time>
        </p>

        <!-- Progress -->
        <div class="row align-items-center no-gutters">
          <div class="col-auto">

            <!-- Value -->
            <div class="small mr-2">29%</div>

          </div>
          <div class="col">

            <!-- Progress -->
            <div class="progress progress-sm">
              <div class="progress-bar" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

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

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group d-none d-md-inline-flex">
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Ab Hadley">
            <img src="assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Adolfo Hess">
            <img src="assets/img/avatars/profiles/avatar-3.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Daniela Dewitt">
            <img src="assets/img/avatars/profiles/avatar-4.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="" data-original-title="Miyah Myles">
            <img src="assets/img/avatars/profiles/avatar-5.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

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

Files Dashkit only

A .card component variation perfect to create a list of files available for download.

Launchday Logo

2.5kb SVG

Uploaded by Dianna Smiley on Jan 3, 2018

Download


                    <div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-auto">

        <!-- Avatar -->
        <a href="#!" class="avatar avatar-lg">
          <img src="../assets/img/files/file-1.jpg" alt="..." class="avatar-img rounded">
        </a>

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

        <!-- Title -->
        <h4 class="mb-1 name">
          <a href="#!">Launchday Logo</a>
        </h4>

        <!-- Text -->
        <p class="card-text small text-muted mb-1">
          2.5kb SVG
        </p>

        <!-- Time -->
        <p class="card-text small text-muted">
          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
        </p>

      </div>
      <div class="col-auto">

        <!-- Button -->
        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
          Download
        </a>

      </div>
      <div class="col-auto">

        <!-- Dropdown -->
        <div class="dropdown">
          <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fe fe-more-vertical"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#!" class="dropdown-item">
              Action
            </a>
            <a href="#!" class="dropdown-item">
              Another action
            </a>
            <a href="#!" class="dropdown-item">
              Something else here
            </a>
          </div>
        </div>

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

Statcards Dashkit only

Create beautiful statcards with the default .card component and the combination of the Bootstrap components and icons.

Budget

$24,500 +3.5%


                    <div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col">

        <!-- Title -->
        <h6 class="text-uppercase text-muted mb-2">
          Budget
        </h6>

        <!-- Heading -->
        <span class="h2 mb-0">
          $24,500
        </span>

        <!-- Badge -->
        <span class="badge badge-soft-success mt-n1">
          +3.5%
        </span>

      </div>
      <div class="col-auto">

        <!-- Icon -->
        <span class="h2 fe fe-dollar-sign text-muted mb-0"></span>

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

Posts Dashkit only

A combination of the .card component, illustrations and margin utilities.

We released 2008 new versions of our theme to make the world a better place.

This is a true story and totally not made up. This is going to be better in the long run but for now this is the way it is.

Try it for free


                    <div class="card">
  <div class="card-body text-center">
    <div class="row justify-content-center">
      <div class="col-12 col-xl-10">

        <!-- Image -->
        <img src="../assets/img/illustrations/happiness.svg" alt="..." class="img-fluid mt-n5 mb-4" style="max-width: 272px;">

        <!-- Title -->
        <h2 class="mb-2">
          We released 2008 new versions of our theme to make the world a better place.
        </h2>

        <!-- Content -->
        <p class="text-muted">
          This is a true story and totally not made up. This is going to be better in the long run but for now this is the way it is.
        </p>

        <!-- Button -->
        <a href="#!" class="btn btn-primary">
          Try it for free
        </a>

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

Pricing Dashkit only

A .card component variation for a pricing option.

Basic plan

/ month

Unlimited activity
Direct messaging
Members 10 members
Admins No access

Start with Basic


                    <div class="card">
  <div class="card-body">

    <!-- Title -->
    <h6 class="text-uppercase text-center text-muted my-4">
      Basic plan
    </h6>

    <!-- Price -->
    <div class="row no-gutters align-items-center justify-content-center">
      <div class="col-auto">
        <div class="h2 mb-0">$</div>
      </div>
      <div class="col-auto">
        <div class="display-2 mb-0">19</div>
      </div>
    </div> <!-- / .row -->

    <!-- Period -->
    <div class="h6 text-uppercase text-center text-muted mb-5">
      / month
    </div>

    <!-- Features -->
    <div class="mb-3">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Unlimited activity</small> <i class="fe fe-check-circle text-success"></i>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Direct messaging</small> <i class="fe fe-check-circle text-success"></i>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Members</small> <small>10 members</small>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between px-0">
          <small>Admins</small> <small>No access</small>
        </li>
      </ul>
    </div>

    <!-- Button -->
    <a href="#!" class="btn btn-block btn-light">
      Start with Basic
    </a>

  </div>
</div>

Kanban Dashkit only

A .card component variation for a kanban item.

Create the release notes for the new pages so customers are warned.

Jun 9


                    <div class="card card-sm mb-0">
  <div class="card-body">

    <!-- Text -->
    <p>
      Create the release notes for the new pages so customers are warned.
    </p>

    <!-- Footer -->
    <div class="row align-items-center">
      <div class="col">

        <!-- Time -->
        <p class="card-text small text-muted">
          <i class="fe fe-clock"></i> Jun 9
        </p>

      </div>
      <div class="col-auto">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="Ab Hadley">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" class="avatar-img rounded-circle" alt="...">
          </a>
        </div>

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

  </div>
</div>

Create the release notes for the new pages so customers are warned.

Jun 9


                    <div class="card card-sm mb-0">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-12 col-md">

        <!-- Title -->
        <p class="mb-md-0">
          Create the release notes for the new pages so customers are warned.
        </p>

      </div>
      <div class="col-6 col-md-auto">

        <!-- Date -->
        <span class="small text-muted">
          <i class="fe fe-clock"></i> Jun 9
        </span>

      </div>
      <div class="col-6 col-md-3 col-lg-2 col-xl-1 text-right">

        <!-- Avatar group -->
        <div class="avatar-group">
          <a href="profile-posts.html" class="avatar avatar-xs" data-toggle="tooltip" title="Ab Hadley">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>
        </div>

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

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.


                    <div class="chart">
  <canvas class="chart-canvas" id="overviewChart"></canvas>
</div>

<script>
  new Chart('overviewChart', {
    type: 'line',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }]
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Earned',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
      }]
    }
  });
</script>

Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.


                    <div class="chart">
  <canvas class="chart-canvas" id="feedChart"></canvas>
</div>

<script>
  new Chart('feedChart', {
    type: 'bar',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }]
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Sales',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }]
    }
  });
</script>

Doughnut

Excellent at showing the relational proportions between data.


                    <div class="chart chart-appended">
  <canvas class="chart-canvas" id="trafficChart" data-toggle="legend" data-target="#trafficChartLegend"></canvas>
</div>

<div class="chart-legend" id="trafficChartLegend"></div>

<script>
  new Chart('trafficChart', {
    type: 'doughnut',
    options: {
      tooltips: {
        callbacks: {
          afterLabel: function() {
            return '%'
          }
        }
      }
    },
    data: {
      labels: ['Direct', 'Organic', 'Referral'],
      datasets: [{
        data: [60, 25, 15],
        backgroundColor: ['#2C7BE5', '#A6C5F7', '#D2DDEC']
      }]
    }
  });
</script>

Sparkline

A simple little line chart with disabled interactions.


                    <div class="chart chart-sparkline">
  <canvas class="chart-canvas" id="sparklineChartSocialOne"></canvas>
</div>

<script>
  new Chart(chart, {
    type: 'line',
    options: {
      scales: {
        yAxes: [{
          display: false
        }],
        xAxes: [{
          display: false
        }]
      },
      elements: {
        line: {
          borderWidth: 2,
          borderColor: '#D2DDEC'
        },
        point: {
          hoverRadius: 0
        }
      },
      tooltips: {
        custom: function() {
          return false;
        }
      }
    },
    data: {
      labels: new Array(12),
      datasets: [{
        data: [0, 15, 10, 25, 30, 15, 40, 50, 80, 60, 55, 65]
      }]
    }
  });

</script>

Toggle chart data

Easily toggle hidden datasets with a simple interface based on the data attributes.

Options

Name	Type	Default	Description
`data-toggle`	string	chart	Activates the toggle functionality.
`data-target`	string	-	The selector of a chart the new set of data will be applied to.
`data-trigger`	string	-	How datasets are triggered. Should be a valid JavaScript event.
`data-action`	string	-	Use `toggle` to replace an active dataset, or `add` to add a new one.
`data-dataset`	number	-	The order of the dataset in the `datasets` array to toggle.

Conversions

Last year comparision:


                    <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="cardToggle" data-toggle="chart" data-target="#conversionsChart" data-trigger="change" data-action="add" data-dataset="1">
  <label class="custom-control-label" for="cardToggle"></label>
</div>

<div class="chart">
  <canvas id="conversionsChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('conversionsChart', {
    type: 'bar',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return value + '%';
            }
          }
        }]
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12'],
      datasets: [{
        label: '2020',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }, {
        label: '2019',
        data: [15, 10, 20, 12, 7, 0, 8, 16, 18, 16, 10, 22],
        backgroundColor: '#d2ddec',
        hidden: true
      }]
    }
  });
</script>

Sales


                    <ul class="nav nav-tabs nav-tabs-sm card-header-tabs">
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="0">
    <a class="nav-link active" href="#" data-toggle="tab">
      All
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="1">
    <a class="nav-link" href="#" data-toggle="tab">
      Direct
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="2">
    <a class="nav-link" href="#" data-toggle="tab">
      Organic
    </a>
  </li>
</ul>

<div class="chart">
  <canvas id="salesChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('salesChart', {
    type: 'line',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }]
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 3', 'Oct 6', 'Oct 9', 'Oct 12', 'Oct 5', 'Oct 18', 'Oct 21', 'Oct 24', 'Oct 27', 'Oct 30'],
      datasets: [{
        label: 'All',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25]
      }, {
        label: 'Direct',
        data: [7, 40, 12, 27, 34, 17, 19, 30, 28, 32, 24],
        hidden: true
      }, {
        label: 'Organic',
        data: [2, 12, 35, 25, 36, 25, 34, 16, 4, 14, 15],
        hidden: true
      }]
    }
  });
</script>

Please refer to src/assets/js/dashkit.js for more examples.

Delete the old mess in functions files.

Refactor the core social sharing modules

Create the release notes for the new pages so customers get psyched.

Send Dianna those meeting notes

Share the documentation for the new unified API

Clean up the Figma file with all of the avatars, buttons, and other components.


                      <div class="checklist">
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistOne" type="checkbox" />
    <label class="custom-control-label" for="checklistOne"></label>
    <span class="custom-control-caption">
      Delete the old mess in functions files.
    </span>
  </div>
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistTwo" type="checkbox" />
    <label class="custom-control-label" for="checklistTwo"></label>
    <span class="custom-control-caption">
      Refactor the core social sharing modules
    </span>
  </div>
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistThree" type="checkbox" />
    <label class="custom-control-label" for="checklistThree"></label>
    <span class="custom-control-caption">
      Create the release notes for the new pages so customers get psyched.
    </span>
  </div>
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistFour" type="checkbox" />
    <label class="custom-control-label" for="checklistFour"></label>
    <span class="custom-control-caption">
      Send Dianna those meeting notes
    </span>
  </div>
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistFive" type="checkbox" />
    <label class="custom-control-label" for="checklistFive"></label>
    <span class="custom-control-caption">
      Share the documentation for the new unified API
    </span>
  </div>
  <div class="custom-control custom-checkbox checklist-control">
    <input class="custom-control-input" id="checklistSix" type="checkbox" checked />
    <label class="custom-control-label" for="checklistSix"></label>
    <span class="custom-control-caption">
      Clean up the Figma file with all of the avatars, buttons, and other
      components.
    </span>
  </div>
</div>

Dropdown ellipsis Dashkit only

Creates a compact dropdown toggler with a Feather icon.

Latest orders


                    <div class="dropdown">

  <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fe fe-more-vertical"></i>
  </a>

  <div class="dropdown-menu dropdown-menu-right">
    <a href="#!" class="dropdown-item">
      Action
    </a>
    <a href="#!" class="dropdown-item">
      Another action
    </a>
    <a href="#!" class="dropdown-item">
      Something else here
    </a>
  </div>
  
</div>

Dropdown card Dashkit only

Turns the default Bootstrap dropdown menu into a fully functional .card component. The height of the .card-body container will be limited and a scrolling bar will appear once this height is exceeded.


                    <div class="dropdown">

  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Card dropdown
  </button>

  <div class="dropdown-menu dropdown-menu-card">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae rem autem impedit ad odio, enim tempore possimus non minus quod dignissimos ipsum eveniet odit, ratione molestiae, velit a dolorem!
    </div>
  </div>

</div>

Dropdown multilevel Dashkit only

Create nested dropdowns with the default Bootstrap markup.


                    <div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonAlias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonAlias">
    <li>
      <a class="dropdown-item" href="#!">Action</a>
    </li>
    <li>
      <a class="dropdown-item" href="#!">Another action</a>
    </li>
    <li class="dropright">
      <a class="dropdown-item dropdown-toggle" href="#" id="dropdownSubmenuButton" data-toggle="dropdown">Something else here</a>
      <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton">
        <a class="dropdown-item" href="#!">Action</a>
        <a class="dropdown-item" href="#!">Another action</a>
        <a class="dropdown-item" href="#!">Something else here</a>
      </div>
    </li>
  </ul>
  
</div>

Validation

Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

First name

Looks good!

Last name

Looks good!

City

Please provide a valid city.

State

Please provide a valid state.

Agree to terms and conditions

You must agree before submitting.

Rounded Dashkit only

Round form control corners with the .form-control-rounded modifier.


                    <input type="text" class="form-control form-control-rounded" placeholder="Form control rounded">

Flush Dashkit only

Remove vertical padding and borders from a form control with the .form-control-flush modifier.


                    <input type="text" class="form-control form-control-flush" placeholder="Form control flush">

Auto Dashkit only

Remove vertical padding and set form control's height to auto with the .form-control-auto modifier.


                    <input type="text" class="form-control form-control-flush form-control-auto" placeholder="Form control auto">

Input group merge Dashkit only

A slightly modified version of the default input groups that always keeps icons as a part of the form control.


                    <div class="input-group input-group-merge">
  <input type="text" class="form-control form-control-prepended" placeholder="Input group prepended">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <span class="fe fe-eye"></span>
    </div>
  </div>
</div>

<div class="input-group input-group-merge">
  <input type="text" class="form-control form-control-appended" placeholder="Input group appended">
  <div class="input-group-append">
    <div class="input-group-text">
      <span class="fe fe-lock"></span>
    </div>
  </div>
</div>

<div class="input-group input-group-merge">
  <input type="text" class="form-control form-control-prepended is-valid" placeholder="Input group prepended">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <span class="fe fe-eye"></span>
    </div>
  </div>
</div>

<div class="input-group input-group-merge">
  <input type="text" class="form-control form-control-appended is-invalid" placeholder="Input group appended">
  <div class="input-group-append">
    <div class="input-group-text">
      <span class="fe fe-lock"></span>
    </div>
  </div>
</div>

Switch

Replaces a standard checkbox input with a toggle switch.

Toggle this switch element


                    <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

Date picker Dashkit only Plugin

A simple yet powerful datepicker powered by the Flatpickr JavaScript plugin. You can pass any options supported by the plugin via the data-options attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.


                    <input type="text" class="form-control" placeholder="Flatpickr example" data-toggle="flatpickr">

<input type="text" class="form-control" placeholder="Flatpickr range example" data-toggle="flatpickr" data-options='{"mode": "range"}'>

Input masking Dashkit only Plugin

Mask your form controls depending on the context with the jQuery Mask plugin. Please read the official plugin documentation for a full list of options.


                    <input type="text" class="form-control" placeholder="US currency example" data-mask="#.##0,00" data-mask-reverse="true">

<input type="text" class="form-control" placeholder="US telephone example" data-mask="(000) 000-0000">

<input type="text" class="form-control" placeholder="US data example" data-mask="00/00/0000">

Rich text editor Dashkit only Plugin

Powerful WYSIWYG text editor powered by Quill. You can pass any options supported by the plugin via the data-options attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.


                    <div data-toggle="quill" data-options='{"placeholder": "Quill WYSIWYG"}'></div>

Drag and drop Dashkit only Plugin

Drag and drop file uploads with image previews powered by Dropzone.js. You can pass any options supported by the plugin via the data-options attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.

Choose file

...
...

Remove


                    <!-- Dropzone -->
<div class="dropzone dropzone-single mb-3" data-toggle="dropzone" data-options='{"url": "https://", "maxFiles": 1, "acceptedFiles": "image/*"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="projectCoverUploads">
      <label class="custom-file-label" for="projectCoverUploads">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover">
      <img class="dz-preview-img" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
    </div>
  </div>

</div>

<!-- Dropzone -->
<div class="dropzone dropzone-multiple" data-toggle="dropzone" data-options='{"url": "https://"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileUploadMultiple" multiple>
      <label class="custom-file-label" for="customFileUploadMultiple">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Image -->
          <div class="avatar">
            <img class="avatar-img rounded" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
          </div>

        </div>
        <div class="col ml-n3">

          <!-- Heading -->
          <h4 class="mb-1" data-dz-name>...</h4>

          <!-- Text -->
          <small class="text-muted" data-dz-size>...</small>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <a href="#" class="dropdown-item" data-dz-remove>
                Remove
              </a>
            </div>
          </div>

        </div>
      </div>
    </li>
  </ul>

</div>

Select Dashkit only Plugin

Customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options powered by Select2. You can pass any options supported by the plugin via the data-options attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.


                    <select class="custom-select" data-toggle="select">
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>

<select class="custom-select" data-toggle="select" data-options='{"minimum-results-for-search": -1}'>
  <option data-avatar-src="../assets/img/avatars/profiles/avatar-1.jpg">
    Dianna Smiley
  </option>
  <option data-avatar-src="../assets/img/avatars/profiles/avatar-2.jpg">
    Ab Hadley
  </option>
  <option data-avatar-src="../assets/img/avatars/profiles/avatar-3.jpg">
    Adolfo Hess
  </option>
  <option data-avatar-src="../assets/img/avatars/profiles/avatar-4.jpg">
    Daniela Dewitt
  </option>
</select>

<select class="form-control" data-toggle="select" multiple>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="form-control form-control-lg" data-toggle="select" multiple>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="custom-select custom-select-sm" data-toggle="select">
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>

<select class="form-control is-valid" data-toggle="select" data-options='{"placeholder": "Valid input"}' multiple>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="custom-select is-invalid" data-toggle="select" data-options='{"placeholder": "Invalid input"}'>
  <option></option>
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>


                    <span class="fe fe-activity"></span>
<span class="fe fe-airplay"></span>
<span class="fe fe-alert-circle"></span>
...

Create the release notes for the new pages so customers are warned.

Jun 9

Create the release notes for the new pages so customers are warned.

Jun 9


                      <div class="container-fluid kanban-container">
  <div class="row">
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-body">

          <!-- Category -->
          <div class="kanban-category">
          
            <!-- Item -->
            <div class="kanban-item">...</div>

          </div>
        
        </div>
      </div>
      
    </div>
    <div class="col-12">

      <!-- Card -->
      <div class="card">
        <div class="card-body">

          <!-- Category -->
          <div class="kanban-category">
          
            <!-- Item -->
            <div class="kanban-item">...</div>

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

Rows Dashkit only

Vertical variation of the kanban board.

Create the release notes for the new pages so customers are warned.

Jun 9

Create the release notes for the new pages so customers are warned.

Jun 9


                      <div class="list-group list-group-lg list-group-flush">
  <div class="list-group-item">

    <!-- Category -->
    <div class="kanban-category">

      <!-- Card -->
      <div class="kanban-item">...</div>

    </div>

  </div>
  <div class="list-group-item">

    <!-- Category -->
    <div class="kanban-category">

      <!-- Card -->
      <div class="kanban-item">...</div>

    </div>

  </div>
</div>

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

Updated 2hr ago

Medium Corporation

Updated 2hr ago

Homepage Redesign

Updated 4hr ago


                    <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

Miyah Myles

● Online

Add
Ryu Duke

● Online

Add
Glen Rouse

● Busy

Add
Grace Gross

● Offline

Add


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

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 font-size-lg bg-primary-soft rounded-circle text-primary">
            <i class="fe fe-mail"></i>
          </div>
        </div>

      </div>
      <div class="col ml-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 font-size-lg bg-primary-soft rounded-circle text-primary">
            <i class="fe fe-mail"></i>
          </div>
        </div>

      </div>
      <div class="col ml-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>

Map Dashkit only

To enable the Mapbox map on your website, you'll need a Mapbox access token. Mapbox uses access tokens to associate API requests with your account. You can create a new access token on your Access Tokens page or programmatically using the Mapbox Tokens API. Once a new access token is created, please replace the original access token at src/assets/js/map.js with the new one.


                    <div class="embed-responsive embed-responsive-21by9 rounded">
  <div class="embed-responsive-item" data-toggle="map" data-options='{"center": [-118.244615, 34.052979], "zoom": 12}'></div>
</div>

Vertical

Creates a vertical variation of the modal component that acts as a layered sidebar. Can be used to display search results, notifications, and almost any other type of content.


                    <!-- Left side -->
<div class="modal fade" id="modalVerticalLeft" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-vertical" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Right side -->
<div class="modal fade fixed-right" id="modalVerticalRight" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-vertical" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Vertical Dashkit only

Creates a vertical variation of the navbar component. Either the .fixed-left or .fixed-right modifier should be added to position the navbar along the left or right side of the viewport. The markup for everything else remains the same as the default navbar!


                    <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light">
  ...
</nav>

Vertical smallDashkit only

Creates a small variation of the vertical sidebar.


                    <nav class="navbar navbar-vertical navbar-vertical-sm fixed-left navbar-expand-md navbar-light">
  ...
</nav>

Small Nav Tabs Dashkit only

Creates a small variation of the nav component – this is especially useful for putting in .card-headers to act as tabs.


                    <ul class="nav nav-tabs nav-tabs-sm">
  <li class="nav-item">
    <a href="#" class="nav-link active">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      Link
    </a>
  </li>
</ul>

Horz. Overscroll Dashkit only

Creates a horizontally scrollable variation of the nav component. Items do not get stacked if they don't fit the viewport. Instead, they stay on the same line and become scrollable in the x axes.


                    <ul class="nav nav-tabs nav-tabs-sm nav-overflow">
  <li class="nav-item">
    <a href="#" class="nav-link active">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      Link
    </a>
  </li>
</ul>

Basic

The basic page header with a preheading and a heading.


                    <div class="header">
  <div class="header-body">

    <h6 class="header-pretitle">
      Members
    </h6>
    
    <h1 class="header-title">
      Casey Fyfe
    </h1>

  </div>
</div>

Button

The basic page header extended with a button.

Members

Dianna Smiley


                    <div class="header">
  <div class="header-body">
    <div class="row
                    align-items-center">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>
        
        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>

  </div>
</div>

Nav

The basic page header extended with a tabbed navigation.

Members

Dianna Smiley


                    <div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>

      </div>
    </div> 

  </div>
</div>

Button + nav

The basic page header extended with a button and a tabbed navigation.

Members

Dianna Smiley


                    <div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">
        
        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>
    <div class="row">
      <div class="col-12">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>
      
      </div>
    </div>
  </div>
</div>

Avatar + nav

The basic page header extended with an avatar group and a tabbed navigation.

Projects

Homepage


                    <div class="header">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-lg avatar-4by3">
            <img src="../../assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
          </div>

        </div>
        <div class="col ml-n3 ml-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Projects
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Homepage
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-3 mt-md-0">

          <!-- Avatar group -->
          <div class="avatar-group">
            <a href="profile-posts.html" class="avatar">
              <img src="../../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="../../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="../../assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="../../assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

          <!-- Button -->
          <a href="#modalMembers" class="btn btn-lg btn-rounded-circle btn-white lift" data-toggle="modal">
            +
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="project-overview.html" class="nav-link active">
                Overview
              </a>
            </li>
            <li class="nav-item">
              <a href="project-files.html" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="project-reports.html" class="nav-link">
                Reports
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</div> <!-- / .header -->

Cover image

A complex page header variation with an image, avatar and other optional components.


                    <div class="header">

  <!-- Image -->
  <img src="../../assets/img/covers/profile-cover-1.jpg" class="header-img-top" alt="...">

  <!-- Body -->
  <div class="container-fluid">
    <div class="header-body mt-n5 mt-md-n6">
      <div class="row align-items-end">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-xxl header-avatar-top">
            <img src="../../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle border border-4 border-card">
          </div>

        </div>
        <div class="col mb-3 ml-n3 ml-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Members
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Dianna Smiley
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-2 mt-md-0 mb-md-3">

          <!-- Button -->
          <a href="#!" class="btn btn-primary d-block d-md-inline-block">
            Subscribe
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="profile-posts.html" class="nav-link">
                Posts
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-groups.html" class="nav-link active">
                Groups
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-projects.html" class="nav-link">
                Projects
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-files.html" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-subscribers.html" class="nav-link">
                Subscribers
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div> <!-- / .header-body -->
  </div>
  
</div>

Chart

A complex page header variation with a tabbed navigation and a chart.


                    <div class="header bg-dark pb-5">
  <div class="container-fluid">

    <!-- Body -->
    <div class="header-body">
      <div class="row align-items-end">
        <div class="col">

          <!-- Pretitle -->
          <h6 class="header-pretitle text-secondary">
            Annual
          </h6>

          <!-- Title -->
          <h1 class="header-title text-white">
            Audience
          </h1>

        </div>
        <div class="col-auto">

          <!-- Nav -->
          <ul class="nav nav-tabs header-tabs">
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="0">
              <a href="#" class="nav-link text-center active" data-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Users
                </h6>
                <h3 class="text-white mb-0">
                  73.2k
                </h3>
              </a>
            </li>
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="1">
              <a href="#" class="nav-link text-center" data-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Sessions
                </h6>
                <h3 class="text-white mb-0">
                  92.1k
                </h3>
              </a>
            </li>
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="2">
              <a href="#" class="nav-link text-center" data-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Bounce
                </h6>
                <h3 class="text-white mb-0">
                  50.2%
                </h3>
              </a>
            </li>
          </ul>

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

    <!-- Footer -->
    <div class="header-footer">

      <!-- Chart -->
      <div class="chart">
        <canvas id="audienceChart" class="chart-canvas"></canvas>
      </div>

    </div>

  </div>
</div> <!-- / .header -->

Small Dashkit only

The progress bar component with its bar height decreased.


                    <div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Dianna Smiley

4hr ago

I've been working on shipping the latest version of Launchday. The story I'm trying to focus on is something like "You're launching soon and need to be 100% focused on your product. Don't lose precious days designing, coding, and testing a product site. Instead, build one in minutes."

What do you y'all think? Would love some feedback from @Ab or @Adolfo?

😬 1 👍 2 Add Reaction

Ab Hadley

11:12

Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really show me what the product does? I think using a short looping video or something similar demo'ing the product might be better?

Adolfo Hess

11:12

Any chance you're going to link the grid up to a public gallery of sites built with Launchday?


                    <div class="card">
  <div class="card-body">

    <!-- Header -->
    <div class="mb-3">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <a href="#!" class="avatar">
            <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

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

          <!-- Title -->
          <h4 class="mb-1">
            Dianna Smiley
          </h4>

          <!-- Time -->
          <p class="card-text small text-muted">
            <span class="fe fe-clock"></span> <time datetime="2018-05-24">4hr ago</time>
          </p>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <a href="#!" class="dropdown-item">
                Action
              </a>
              <a href="#!" class="dropdown-item">
                Another action
              </a>
              <a href="#!" class="dropdown-item">
                Something else here
              </a>
            </div>
          </div>

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

    <!-- Text -->
    <p class="mb-3">
      I've been working on shipping the latest version of Launchday. The story I'm trying to focus on is something like "You're launching soon and need to be 100% focused on your product. Don't lose precious days designing, coding, and testing a product site. Instead, build one in minutes."
    </p>

    <p class="mb-4">
      What do you y'all think? Would love some feedback from <a href="#!" class="badge badge-soft-primary">@Ab</a> or <a href="#!" class="badge badge-soft-primary">@Adolfo</a>?
    </p>

    <!-- Image -->
    <p class="text-center mb-3">
      <img src="../assets/img/posts/post-1.jpg" alt="..." class="img-fluid rounded">
    </p>

    <!-- Buttons -->
    <div class="mb-3">
      <div class="row">
        <div class="col">

          <a href="#!" class="btn btn-sm btn-white">
            �� 1
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            �� 2
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            Add Reaction
          </a>

        </div>
        <div class="col-auto mr-n3">

          <!-- Avatar group -->
          <div class="avatar-group d-none d-sm-flex">
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-5.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

        </div>
        <div class="col-auto">

          <!-- Button -->
          <a href="#!" class="btn btn-sm btn-white">
            Share
          </a>

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

    <!-- Divider -->
    <hr>

    <!-- Comments -->
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.html">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

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

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Ab Hadley
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

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

            <!-- Text -->
            <p class="comment-text">
              Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really <em>show</em> me what the product does? I think using a short looping video or something similar demo'ing the product might be better?
            </p>

          </div>

        </div>
      </div> <!-- / .row -->
    </div>
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.html">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

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

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Adolfo Hess
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

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

            <!-- Text -->
            <p class="comment-text">
              Any chance you're going to link the grid up to a public gallery of sites built with Launchday?
            </p>

          </div>

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

    <!-- Divider -->
    <hr>

    <!-- Form -->
    <div class="row">
      <div class="col-auto">

        <!-- Avatar -->
        <div class="avatar avatar-sm">
          <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>

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

        <!-- Input -->
        <form class="mt-1">
          <label class="sr-only">Leave a comment...</label>
          <textarea class="form-control form-control-flush" data-toggle="autosize" rows="1" placeholder="Leave a comment"></textarea>
        </form>

      </div>
      <div class="col-auto align-self-end">

        <!-- Icons -->
        <div class="text-muted mb-2">
          <a class="text-reset mr-3" href="#!" data-toggle="tooltip" title="Add photo">
            <i class="fe fe-camera"></i>
          </a>
          <a class="text-reset mr-3" href="#!" data-toggle="tooltip" title="Attach file">
            <i class="fe fe-paperclip"></i>
          </a>
          <a class="text-reset" href="#!" data-toggle="tooltip" title="Record audio">
            <i class="fe fe-mic"></i>
          </a>
        </div>

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

  </div>
</div>


                    <div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

Colors

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.


                    <div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>

Buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.


                    <button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>


                    <button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Card

Use spinners within cards to indicate its content is currently loading.


                    <div class="card">
  <div class="card-body text-center">
    <div class="spinner-border" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

No wrap Dashkit only

Prevents table cell content from wrapping to another line

#	First	Last	Handle	Decription
1	Mark	Otto	@mdo	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
2	Jacob	Thornton	@fat	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
3	Larry	the Bird	@twitter	Lorem ipsum dolor sit amet, consectetur adipisicing elit.


                    <table class="table table-sm table-nowrap">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Decription</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    </tr>
  </tbody>
</table>

Sorting Dashkit only Plugin

Adds a sorting functionality to your tables powered by List.js. Please read the official plugin documentation for a full list of options or the lists section of the current documentation for custom initialization options.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


                    <div class="table-responsive" data-list='{"valueNames": ["tables-row", "tables-first", "tables-last", "tables-handle"]}'>
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-row">#</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-first">First</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-last">Last</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-handle">Handle</a>
        </th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <th scope="row" class="tables-row">1</th>
        <td class="tables-first">Mark</td>
        <td class="tables-last">Otto</td>
        <td class="tables-handle">@mdo</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">2</th>
        <td class="tables-first">Jacob</td>
        <td class="tables-last">Thornton</td>
        <td class="tables-handle">@fat</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">3</th>
        <td class="tables-first">Larry</td>
        <td class="tables-last">the Bird</td>
        <td class="tables-handle">@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Hello, world! This is a toast message.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Link example

Backgrounds Dashkit Only

.bg-fixed-bottom to fix the background image at the bottom of the .main container at the feed.html page.
.bg-cover to set the background-image size of an element to cover.
.bg-vibrant to apply a background image with a vibrant gradient for the sidebar.
.bg-lighter to set the backgroud color to the value of the $lighter SCSS variable.


                    <div class="bg-fixed-bottom" style="background-image: url(assets/img/illustrations/sticky.svg);">...</div>

<div class="bg-cover" style="background-image: url(...);">...</div>

<nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-dark bg-vibrant">...</div>
  
<div class="bg-lighter">...</div>

Sizing Dashkit only

.vw-100 to change the width of an element to 100vw.
.vh-100 to change the height of an element to 100vh.


                    <div class="vw-100 vh-100">...</div>

Borders Dashkit only

.border-2(3, 4, 5), .border-top-2(3, 4, 5), .border-right-2(3, 4, 5), .border-bottom-2(3, 4, 5), .border-left-2(3, 4, 5) to increase the width of a border.


                    <div class="border border-2 border-white">...</div>

Lift Dashkit only

.lift(-lg) to visually lift an element on hover and focus.


                    <a class="btn btn-white lift">
  Hover to lift
</a>

<a class="btn btn-white lift lift-lg">
  Hover to lift
</a>

Type Dashkit only

.text-decoration-underline to set the text decoration property to underline.


                    <a class="text-decoration-underline" href="#!">...</a>

Airbnb

Medium Corporation

Homepage Redesign

Travels & Time

Safari Exploration

Dianna Smiley

Ab Hadley

Alerts

Well done!

Autosize

Avatars Dashkit only

Sizing

Status Indicator

Shape

Ratio

Initials

Groups

Badges

Soft Dashkit only

Breadcrumb

Button group

Buttons

White Dashkit only

Rounded circle Dashkit only

Icon Dashkit only

Cards

Card title

Card header Dashkit only

Card title

Card header navigation Dashkit only

Card title

Inactive Dashkit only

Fill Dashkit only New

Traffic Channels

Weekly Sales

Orders Placed

Conversion Rate

Avg. Order VaLue

Adjust Dashkit only New

Recent Activity

Launchday 1.4.0 update email sent

Launchday 1.4.0 update email sent

Launchday 1.4.0 update email sent

Launchday 1.4.0 update email sent

Popular Content

Profile Dashkit only

Team Dashkit only

Project Dashkit only

Files Dashkit only

Statcards Dashkit only

Budget

Posts Dashkit only

We released 2008 new versions of our theme to make the world a better place.

Pricing Dashkit only

Basic plan

Kanban Dashkit only

Charts Dashkit only Plugin

Line

Bar

Doughnut

Sparkline

Toggle chart data

Options

Conversions

Sales

Checklist Dashkit only New

Dropdowns

Dropdown ellipsis Dashkit only

Latest orders

Dropdown card Dashkit only

Dropdown multilevel Dashkit only

Forms

Validation

Rounded Dashkit only

Flush Dashkit only

Auto Dashkit only

Input group merge Dashkit only

Switch

Date picker Dashkit only Plugin

Input masking Dashkit only Plugin