Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Please see the official Bootstrap documentation for a full list of options.

Autosize Dashkit only New

A small, stand-alone script to automatically adjust textarea height. 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.

Avatars Dashkit only

Create and group avatars of different sizes and shapes with a single component.

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.

...
...
...
...
...
...

Status Indicator

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

...
...
...
...
...
...

Shape

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

...
...
...
...
...
...

Ratio

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

...
...
...
...

Initials

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

CF
CF
CF
CF
CF
CF

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.

...
...
...
CF
...
...
...
CF
...
...
...
CF

Badges

A small count and labeling component. Please read the official Bootstrap documentation for a full list of options.

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

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Please read the official Bootstrap documentation for a full list of options.


White Dashkit only

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


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.


Icon Dashkit only

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

Button group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. Please read the official Bootstrap documentation for a full list of options.

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for a full list of options.

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.


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.

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.


Inactive Dashkit only

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

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.


Profile Dashkit only

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

...
...

Ab Hadley

Working on the latest API integration.

UX Team Research Team


Online

Ab Hadley

Working on the latest API integration.

Online


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

Launchday

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

Updated 2hr ago


Project Dashkit only

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


Files Dashkit only

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


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%

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

Pricing Dashkit only

A .card component variation for a pricing option.

Standard plan
$
29
/ month
  • Unlimited activity
  • Direct messaging
  • Members 50 members
  • Admins 5 admins
Start with Standard

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

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

Jun 9

Charts Dashkit only Plugin

Create beautiful charts with a simple, but powerful and flexible JavaScript Chart.js plugin. Please read the official documentation for a full list of options.

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.


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.


Doughnut

Excellent at showing the relational proportions between data.

<div class="chart">
  <canvas id="devicesChart" class="chart-canvas" data-toggle="legend" data-target="#devicesChartLegend"></canvas>
</div>

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

<script>
new Chart('devicesChart', {
  type: 'doughnut',
  data: {
    labels: ['Desktop', 'Tablet', 'Mobile'],
    datasets: [{
      data: [60, 25, 15]
    }]
  }
});
</script>

Sparkline

A simple little line chart with disabled interactions.

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

<script>
  new Chart('sparkChart', {
    type: 'line',
    options: {
      scales: {
        yAxes: [{
          display: false
        }],
        xAxes: [{
          display: false
        }]
      },
      elements: {
        line: {
          borderWidth: 2
        },
        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 an additional set of data 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-add object - The new set of data to be applied in the chart.js format. Please read the official documentation for more info.

Orders

Show affiliate:

Update chart data

Update the current set of data with a similar to the toggle interface. Please use the options above along with the new data attributes:

Options

Name Type Default Description
data-update object - The new set of data to be applied in the chart.js format. Please read the official documentation for more info. This attribute should not be used together with the data-add attribute.
data-prefix string - Changes the prefix value for the y axes ticks and tooltips.
data-suffix string - Changes the suffix value for the y axes ticks and tooltips.

Forms

Dashkit supports all of Bootstrap's default form styling in addition to a handful of new input types and features. Please read the official documentation for a full list of options from Bootstrap's core library.


Validation

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

Looks good!
Looks good!
Please provide a valid city.
Please provide a valid state.
You must agree before submitting.

Rounded Dashkit only

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


Flush Dashkit only

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


Auto Dashkit only

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


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.


Switch

Replaces a standard checkbox input with a toggle switch.



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


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.


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.

...

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.

Icons Dashkit only

Simply beautiful icons powered by the Feather icons. Please see the official plugin documentation for a full list of icons.

Kanban Dashkit only New

Kanban board powered by Dragula.js. Please read the official plugin documentation for a full list of options.

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


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

Map Dashkit only New

Adds an interactive map powered by Mapbox. 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.

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

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

List.js Dashkit only Plugin

Create searchable, sortable, and filterable lists and tables with the simple but powerful List.js plugin. Please read the official plugin documentation for a full list of options.

Add a member

Page headers Dashkit only

The page header component that can be easily extended with other Bootstrap and Dashkit components.

Basic

The basic page header with a preheading and a heading.

Members

Dianna Smiley


Button

The basic page header extended with a button.

Members

Dianna Smiley


Nav

The basic page header extended with a tabbed navigation.

Members

Dianna Smiley


Button + nav

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


Avatar + nav

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


Cover image

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


Chart

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

Popovers

Please see the official Bootstrap documentation for a full list of options.

Progress

Please see the official Bootstrap documentation for a full list of options.


Small Dashkit only

The progress bar component with its bar height decreased.

Social posts Dashkit only

A variation of the card component featuring Dashkit comments.

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?

...


Ab Hadley

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

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


...

Spinners

Indicate the loading state of a component or page with Bootstrap spinners. Please read the official Bootstrap documentation for a full list of options.

Loading...
Loading...
Loading...
Loading...

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.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Tables

Please read the official Bootstrap documentation for a full list of options.

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

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

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Please read the official Bootstrap documentation for a full list of options.

Tooltips

Please read the official Bootstrap documentation for a full list of options.

Typography

Dashkit makes use of the Cerebri Sans webfont for both headings and body content.

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

Utilities

Please visit the official Bootstrap documentation for a full list of utilities. Additionally, the following utilities have been added:

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>