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.
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.
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.
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.
Badges
A small count and labeling component. Please read the official Bootstrap documentation for a full list of options.
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.
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 somewhereCard 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.
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.
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.
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 freePricing Dashkit only
A .card component variation for a pricing option.
Standard plan
- Unlimited activity
- Direct messaging
- Members 50 members
- Admins 5 admins
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.
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
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. |
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Please read the official Bootstrap documentation for a full list of options.
Dropdown ellipsis Dashkit only
Creates a compact dropdown toggler with a Feather icon.
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.
Dropdown multilevel Dashkit only
Create nested dropdowns with the default Bootstrap markup.
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.
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.
Create the release notes for the new pages so customers are warned.
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
Modals
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Please read the official Bootstrap documentation for a full list of options.
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.
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.
Members
Dianna Smiley
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.
Overview
Performance
Pagination
Indicates a series of related content exists across multiple pages. Please see the official Bootstrap documentation for a full list of options.
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.
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.
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 |
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 | 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.
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.
Task complete
2 mins agoTooltips
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.
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-bottomto fix the background image at the bottom of the.maincontainer at the feed.html page. -
.bg-coverto set thebackground-imagesize of an element tocover. -
.bg-vibrantto apply a background image with a vibrant gradient for the sidebar. -
.bg-lighterto set the backgroud color to the value of the$lighterSCSS 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-100to change the width of an element to100vw. -
.vh-100to change the height of an element to100vh.
<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-underlineto set the text decoration property to underline.
<a class="text-decoration-underline" href="#!">...</a>
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?