Documentation

Find out what's included in your Bootstrap theme and how to compile source files. Includes live examples and code snippets for every new component.

Contents

Intro

Hey there! You’re looking at the docs for an Official Bootstrap Theme—thanks for your purchase! This theme has been lovingly crafted by Bootstrap’s founders and friends to help you build awesome projects on the web. Let’s dive in.

Each theme is designed as it’s own toolkit—a series of well designed, intuitive, and cohesive components—built on top of Bootstrap. If you’ve used Bootstrap itself, you’ll find this all super familiar, but with new aesthetics, new components, beautiful and extensive examples, and easy-to-use build tools and documentation.

Since this theme is based on Bootstrap, and includes nearly everything Bootstrap itself does, you’ll want to give the official project documentation a once over before continuing. There’s also the kitchen sink—a one-page view of all Bootstrap’s components restyled by this theme.

For everything else, including compiling and using this Bootstrap theme, read through the docs below.

Thanks, and enjoy!

What’s included

Within your Bootstrap theme you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.

theme/
  ├── v3
  └── v4
      ├── gulpfile.js
      ├── package.json
      ├── README.md
      ├── docs/
      ├── scss/
      │   ├── bootstrap/
      │   ├── custom/
      │   ├── variables.scss
      │   └── toolkit.scss
      ├── js/
      │   ├── bootstrap/
      │   └── custom/
      ├── fonts/
      │   ├── bootstrap-entypo.eot
      │   ├── bootstrap-entypo.svg
      │   ├── bootstrap-entypo.ttf
      │   ├── bootstrap-entypo.woff
      │   └── bootstrap-entypo.woff2
      └── dist/
          ├── toolkit.css
          ├── toolkit.css.map
          ├── toolkit.min.css
          ├── toolkit.min.css.map
          ├── toolkit.js
          └── toolkit.min.js

Getting started

At the top level of your bootstrap theme you’ll find a directory for each major Bootstrap version that’s supported (currently both v3 and v4). Within each directory you have all the relevant files for that version.

To view your Bootstrap Theme documentation, simply find the docs directory and open index.html in your favorite browser.

$ open docs/index.html

Gulpfile.js

If you’re after more customization we’ve also included a custom Gulp file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Gulp before using our included gulpfile.js.

Once node is installed, run the following npm command to install Gulp.

$ npm install gulp -g

When you’re done, make sure you’ve installed the rest of the theme’s dependencies:

$ npm install

Now, modify your source files and run gulp to generate new local dist/ files automatically. Be aware that this replaces existing dist/ files, so proceed with caution.

Theme source code

The scss/, js/, and fonts/ directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the scss/ and js/ directories you’ll find two subdirectories:

The dist/ folder includes everything above, built into single CSS and JS files that can easily be integrated into your project.

The docs/ folder includes the source code for our documentation, as well as a handful of live examples.

The remaining files not specifically mentioned above provide support for packages, license information, and development.

Custom builds

Leverage the included source files and gulpfile.js to customize your Bootstrap Theme for your exact needs. Change variables, exclude components, and more.

Basic template

The basic template is a guideline for how to structure your pages when building with a Bootstrap Theme. Included below are all the necessary bits for using the theme’s CSS and JS, as well as some friendly reminders.

Copy the example below into a new HTML file to get started with it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Theme Example</title>

    <!-- Include the CSS -->
    <link href="dist/toolkit.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Include jQuery (required) and the JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="dist/toolkit.min.js"></script>
  </body>
</html>

Components

Entypo

Entypo is an awesome, high quality set of icon glyphs made by Daniel Bruce. We’ve replaced Bootstrap’s default icon font, Glyhpicons, with the complete Entypo set and Entypo social extension.

Simply use the new icon class and an icon-{modifier} on an inline element. See the examples below for more details.

Available icons

Below are all the original and social icons from Entypo that you can choose from:

Examples

Entypo icons can be placed in just about any other element, so long as they are a separate HTML element (e.g., a <span>). See the examples below for how to put them to use.

<button class="btn btn-secondary" type="button">
  <span class="icon icon-thumbs-up"></span>
  Like
</button>
<button class="btn btn-primary" type="button">
  <span class="icon icon-thumbs-up"></span>
  Liked!
</button>
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <span class="icon icon-chat"></span>
      Discussions
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <span class="icon icon-bell"></span>
      Notifications
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <span class="icon icon-users"></span>
      Members
    </a>
  </li>
</ul>

Pill buttons

Add .btn-pill to any button to make them more rounded.

<button type="button" class="btn btn-lg btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-pill btn-success">Success</button>
<button type="button" class="btn btn-lg btn-pill btn-info">Info</button>
<button type="button" class="btn btn-lg btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-pill btn-link">Link</button>
<button type="button" class="btn btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-pill btn-success">Success</button>
<button type="button" class="btn btn-pill btn-info">Info</button>
<button type="button" class="btn btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-pill btn-link">Link</button>
<button type="button" class="btn btn-sm btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-sm btn-pill btn-success">Success</button>
<button type="button" class="btn btn-sm btn-pill btn-info">Info</button>
<button type="button" class="btn btn-sm btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-pill btn-link">Link</button>
<button type="button" class="btn btn-xs btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-pill btn-secondary">Default</button>
<button type="button" class="btn btn-xs btn-pill btn-success">Success</button>
<button type="button" class="btn btn-xs btn-pill btn-info">Info</button>
<button type="button" class="btn btn-xs btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-pill btn-link">Link</button>

Flex table

Use the flex table classes when you need to keep related elements on the same row, but with flexible individual widths.

<div class="flextable">
  <div class="flextable-item flextable-primary">
    <input type="text" class="form-control" placeholder="Search orders">
  </div>
  <div class="flextable-item">
    <div class="btn-group">
      <button type="button" class="btn btn-outline-primary">
        <span class="icon icon-pencil"></span>
      </button>
      <button type="button" class="btn btn-outline-primary">
        <span class="icon icon-erase"></span>
      </button>
    </div>
  </div>
</div>

Stat cards

Use stat cards to easily display large numbers, great for any kind of simple metrics and dashboard content.

12,938

Page views

758

Downloads

1,293

Sign-ups 
<div class="statcard p-3">
  <h3 class="statcard-number">12,938</h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3 text-xs-center">
  <h3 class="statcard-number">758</h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard p-3 text-xs-right">
  <h3 class="statcard-number">1,293</h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

With optional carets:

12,938 5%

Page views

758 1.3%

Downloads 
<div class="statcard p-3">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>

With background variations:

12,938 5%

Page views

758 1.3%

Downloads

758 1.3%

Downloads

1,293 6.75%

Sign-ups

1,293 6.75%

Sign-ups 
<div class="statcard statcard-primary p-4 mb-2">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard statcard-success p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-info p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-danger p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>
<div class="statcard statcard-warning p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

And use the grid system to size and align them:

12,938 5%

Page views

758 1.3%

Downloads 
<div class="row">
  <div class="col-sm-6">
    <div class="statcard statcard-primary p-4">
      <h3 class="statcard-number">
        12,938
        <small class="delta-indicator delta-positive">5%</small>
      </h3>
      <span class="statcard-desc">Page views</span>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="statcard statcard-success p-4">
      <h3 class="statcard-number">
        758
        <small class="delta-indicator delta-negative">1.3%</small>
      </h3>
      <span class="statcard-desc">Downloads</span>
    </div>
  </div>
</div>

Divided heading

Use a divided heading to call special attention to a separation of content in your pages.

Divider heading 

<div class="hr-divider">
  <h3 class="hr-divider-content hr-divider-heading">
    Divider heading
  </h3>
</div>

You can also use it with pill navigation:

<div class="hr-divider">
  <ul class="nav nav-pills hr-divider-content hr-divider-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab</a>
    </li>
  </ul>
</div>

Icon input

Easily overlay an icon on an input.

<div class="input-with-icon">
  <input type="text" value="Example input" class="form-control">
  <span class="icon icon-calendar"></span>
</div>

The bordered nav builds on Bootstrap’s .nav base styles with a new, bolder variation to nav links.

<ul class="nav nav-bordered">
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Components</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Docs</a>
  </li>
</ul>

Bordered nav links can also be stacked:

<ul class="nav nav-bordered nav-stacked flex-md-column">
  <li class="nav-header">Examples</li>
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>

  <li class="nav-header">Sections</li>

  <li class="nav-item">
    <a class="nav-link" href="#">Grid</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

Icon nav

The icon nav is a special sidebar navigation for this toolkit. In mobile viewports, the icon nav is horizontal with icons and textual labels. On larger devices the icon nav changes and becomes affixed to the side of the viewport with tooltips instead of textual labels.

<nav class="iconav">
    <a class="iconav-brand" href="#">
      <span class="icon icon-leaf iconav-brand-icon"></span>
    </a>
    <div class="iconav-slider">
      <ul class="nav nav-pills iconav-nav flex-md-column">
        <li class="nav-item">
          <a class="nav-link" href="#" title="Overview" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-home"></span>
            <small class="iconav-nav-label d-md-none">Overview</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="Order history" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-text-document"></span>
            <small class="iconav-nav-label d-md-none">History</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="Fluid layout" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-globe"></span>
            <small class="iconav-nav-label d-md-none">Fluid layout</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="Icon-nav layout" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-area-graph"></span>
            <small class="iconav-nav-label d-md-none">Icon nav</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#" title="Docs" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-list"></span>
            <small class="iconav-nav-label d-md-none">Docs</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="Light UI" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-flash"></span>
            <small class="iconav-nav-label d-md-none">Light UI</small>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="Signed in as mdo" data-toggle="tooltip" data-placement="right" data-container="body">
            <img src="../assets/img/avatar-mdo.png" alt="" class="rounded-circle img-fluid">
            <small class="iconav-nav-label d-md-none">@mdo</small>
          </a>
        </li>
      </ul>
    </div>
  </nav>

Dashhead

The dashhead is a custom component built to house all the textual headings, form controls, buttons, and more that are common for the top of dashboard page.

Dashboards

Overview

<div class="dashhead">
  <div class="dashhead-titles">
    <h6 class="dashhead-subtitle">Dashboards</h6>
    <h3 class="dashhead-title">Overview</h3>
  </div>

  <div class="dashhead-toolbar">
    <div class="input-with-icon dashhead-toolbar-item">
      <input type="text" value="01/01/15 - 01/08/15" class="form-control" data-provide="datepicker">
      <span class="icon icon-calendar"></span>
    </div>
    <span class="dashhead-toolbar-divider hidden-xs"></span>
    <div class="btn-group dashhead-toolbar-item btn-group-thirds">
      <button type="button" class="btn btn-outline-primary">Day</button>
      <button type="button" class="btn btn-outline-primary active">Week</button>
      <button type="button" class="btn btn-outline-primary">Month</button>
    </div>
  </div>
</div>

List group

Bootstrap’s default list group component is extended with a few additional features.

List group header

New to the theme is a header for list groups, similar to panels. use it for standalone lists as needed. This should not be used with panels.

<ul class="list-group">
  <li class="list-group-header">List group header</li>
  <li class="list-group-item">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 progress

Similar to stat lists, add a background progress indicator to any list group item.

<ul class="list-group">
  <li class="list-group-item">
    Cras justo odio
    <span class="list-group-progress" style="width: 75%;"></span>
  </li>
  <li class="list-group-item">
    Porta ac consectetur ac
    <span class="list-group-progress" style="width: 50%;"></span>
  </li>
  <li class="list-group-item">
    Vestibulum at eros
    <span class="list-group-progress" style="width: 25%;"></span>
  </li>
</ul>

Custom Modals

Support for multiple, stackable modal bodies and scrolling bodies using the new .modal-body-scroller modifier.

Medium Modal

Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo.

Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

<div class="modal">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Medium Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body modal-body-scroller">
        <p>Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</p>

        <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.</p>
      </div>

      <div class="modal-body">
        <input type="text" class="form-control" placeholder="Message">
      </div>
    </div>
  </div>
</div>

Also, drop the regular footer for a new two-up set of actions using the .modal-actions component.

Small modal

Modal body text...

<div class="modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Small modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p>Modal body text...</p>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn-link modal-action" data-dismiss="modal">
          <strong>Continue</strong>
        </button>
        <button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

Plugins

Tablesorter

Including in this theme is Tablesorter, a jQuery plugin for easy column sorting on tables. Basic styles for the directional arrows when sorting are included here for ease. Consult the Tablesorter docs for usage and additional customizations.

Order Customer name Description Date Total
#10001 First Last Admin theme, marketing theme 01/01/2015 $200.00
#10002 Firstname Last Admin theme 01/01/2015 $100.00
#10003 Name Another Personal blog theme 01/01/2015 $100.00
#10004 One More Marketing theme, personal blog theme, admin theme 01/01/2015 $300.00
#10005 Name Right Here Personal blog theme, admin theme 01/02/2015 $200.00

Enabling Tablesorter is easy with jQuery:

$(document).ready(function() {
  // call the tablesorter plugin
  $("[data-sort=table]").tablesorter({
    // Sort on the second column, in ascending order
    sortList: [[1,0]]
  });
});

Datepicker

We’ve integrated the excellent Bootstrap Datepicker plugin for your convenience. You can initiate this simply with data-attributes or for more advanced applications use the javascript API. Refer to their docs for more information.

<div class="input-with-icon">
  <input type="text" value="01/01/2015" class="form-control" data-provide="datepicker">
  <span class="icon icon-calendar"></span>
</div>

Chart.js

Charts and graphs are available through Chart.js, a clean and responsive canvas-based chart rendering JavaScript library.

We recommend reviewing the full Chart.js documentation as you implement or modify any charts here.