## Documentation

### Introduction

Breeze-free is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Breeze-free and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please use Envato support form on our profile or email us at support@bootstrapdash.com

### Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

Breeze-free/ ├ jquery/ ├ documentation/ ├ template/ ├ assets/ ├ css/ ├ fonts/ ├ images/ ├ js/ ├ scss/ ├ vendors/ ├ pages/ ├ gulp-tasks/ ├ partials/ ├ index.html ├ package.json ├ CHANGELOG.md

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task `bundleVendors` to rebuild the vendor files.

#### Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

npm install

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

npm install -g gulp-cli

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

gulp serve
It is important to run `gulp serve` command from the directory where the gulpfile.js is located.

### Basic structure

The below snippet shows the basic HTML structure of Breeze-free. Please note that all the stylesheets and script files in the below snippet should be included to render Breeze-free styles.

This section contains code of default vertical light layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Breeze-free Admin</title> <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css" /> <link rel="stylesheet" href="assets/vendors/flag-icon-css/css/flag-icon.min.css" /> <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css" /> <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css" /> <link rel="stylesheet" href="assets/css/style.css" /> <link rel="shortcut icon" href="assets/images/favicon.png" /> </head> <body> <div class="container-scroller"> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <div class="text-center sidebar-brand-wrapper d-flex align-items-center"> <a class="sidebar-brand brand-logo" href="index.html"><img src="assets/images/logo.svg" alt="logo" /></a> <a class="sidebar-brand brand-logo-mini pl-4 pt-3" href="index.html"><img src="assets/images/logo-mini.svg" alt="logo" /></a> </div> <ul class="nav"> <li class="nav-item nav-profile"> <a href="#" class="nav-link"> <div class="nav-profile-image"> <img src="assets/images/faces/face1.jpg" alt="profile" /> <span class="login-status online"></span> <!--change to offline or busy as needed--> </div> <div class="nav-profile-text d-flex flex-column pr-3"> <span class="font-weight-medium mb-2">Henry Klein</span> <span class="font-weight-normal">$8,753.00</span> </div> <span class="badge badge-danger text-white ml-3 rounded">3</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="index.html"> <i class="mdi mdi-home menu-icon"></i> <span class="menu-title">Dashboard</span> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic"> <i class="mdi mdi-crosshairs-gps menu-icon"></i> <span class="menu-title">Basic UI Elements</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="ui-basic"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a> </li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="pages/icons/mdi.html"> <i class="mdi mdi-contacts menu-icon"></i> <span class="menu-title">Icons</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="pages/forms/basic_elements.html"> <i class="mdi mdi-format-list-bulleted menu-icon"></i> <span class="menu-title">Forms</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="pages/charts/chartjs.html"> <i class="mdi mdi-chart-bar menu-icon"></i> <span class="menu-title">Charts</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="pages/tables/basic-table.html"> <i class="mdi mdi-table-large menu-icon"></i> <span class="menu-title">Tables</span> </a> </li> <li class="nav-item"> <span class="nav-link" href="#"> <span class="menu-title">Docs</span> </span> </li> <li class="nav-item"> <a class="nav-link" href="http://bootstrapdash.com/demo/Breeze-free/jquery/documentation/documentation.html"> <i class="mdi mdi-file-document-box menu-icon"></i> <span class="menu-title">Documentation</span> </a> </li> <li class="nav-item sidebar-actions"> <div class="nav-link"> <div class="mt-4"> <div class="border-none"> <p class="text-black">Notification</p> </div> <ul class="mt-4 pl-0"> <li>Sign Out</li> </ul> </div> </div> </li> </ul> </nav> <div class="container-fluid page-body-wrapper"> <div id="theme-settings" class="settings-panel"> <i class="settings-close mdi mdi-close"></i> <p class="settings-heading">SIDEBAR SKINS</p> <div class="sidebar-bg-options selected" id="sidebar-default-theme"> <div class="img-ss rounded-circle bg-light border mr-3"></div> Default </div> <div class="sidebar-bg-options" id="sidebar-dark-theme"> <div class="img-ss rounded-circle bg-dark border mr-3"></div> Dark </div> <p class="settings-heading mt-2">HEADER SKINS</p> <div class="color-tiles mx-0 px-4"> <div class="tiles light"></div> <div class="tiles dark"></div> </div> </div> <nav class="navbar col-lg-12 col-12 p-lg-0 fixed-top d-flex flex-row"> <div class="navbar-menu-wrapper d-flex align-items-stretch justify-content-between"> <a class="navbar-brand brand-logo-mini align-self-center d-lg-none" href="index.html"><img src="assets/images/logo-mini.svg" alt="logo" /></a> <button class="navbar-toggler navbar-toggler align-self-center mr-2" type="button" data-toggle="minimize"> <i class="mdi mdi-menu"></i> </button> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-bell-outline"></i> <span class="count count-varient1">7</span> </a> <div class="dropdown-menu navbar-dropdown navbar-dropdown-large preview-list" aria-labelledby="notificationDropdown"> <h6 class="p-3 mb-0">Notifications</h6> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="assets/images/faces/face4.jpg" alt="" class="profile-pic" /> </div> <div class="preview-item-content"> <p class="mb-0"> Dany Miles <span class="text-small text-muted">commented on your photo</span> </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="assets/images/faces/face3.jpg" alt="" class="profile-pic" /> </div> <div class="preview-item-content"> <p class="mb-0"> James <span class="text-small text-muted">posted a photo on your wall</span> </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="assets/images/faces/face2.jpg" alt="" class="profile-pic" /> </div> <div class="preview-item-content"> <p class="mb-0"> Alex <span class="text-small text-muted">just mentioned you in his post</span> </p> </div> </a> <div class="dropdown-divider"></div> <p class="p-3 mb-0">View all activities</p> </div> </li> <li class="nav-item dropdown d-none d-sm-flex"> <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-email-outline"></i> <span class="count count-varient2">5</span> </a> <div class="dropdown-menu navbar-dropdown navbar-dropdown-large preview-list" aria-labelledby="messageDropdown"> <h6 class="p-3 mb-0">Messages</h6> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow"> <span class="badge badge-pill badge-success">Request</span> <p class="text-small text-muted ellipsis mb-0"> Suport needed for user123 </p> </div> <p class="text-small text-muted align-self-start"> 4:10 PM </p> </a> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow"> <span class="badge badge-pill badge-warning">Invoices</span> <p class="text-small text-muted ellipsis mb-0"> Invoice for order is mailed </p> </div> <p class="text-small text-muted align-self-start"> 4:10 PM </p> </a> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow"> <span class="badge badge-pill badge-danger">Projects</span> <p class="text-small text-muted ellipsis mb-0"> New project will start tomorrow </p> </div> <p class="text-small text-muted align-self-start"> 4:10 PM </p> </a> <h6 class="p-3 mb-0">See all activity</h6> </div> </li> <li class="nav-item nav-search border-0 ml-1 ml-md-3 ml-lg-5 d-none d-md-flex"> <form class="nav-link form-inline mt-2 mt-md-0"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" /> <div class="input-group-append"> <span class="input-group-text"> <i class="mdi mdi-magnify"></i> </span> </div> </div> </form> </li> </ul> <ul class="navbar-nav navbar-nav-right ml-lg-auto"> <li class="nav-item dropdown d-none d-xl-flex border-0"> <a class="nav-link dropdown-toggle" id="languageDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-earth"></i> English </a> <div class="dropdown-menu navbar-dropdown" aria-labelledby="languageDropdown"> <a class="dropdown-item" href="#"> French </a> <a class="dropdown-item" href="#"> Spain </a> <a class="dropdown-item" href="#"> Latin </a> <a class="dropdown-item" href="#"> Japanese </a> </div> </li> <li class="nav-item nav-profile dropdown border-0"> <a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown"> <img class="nav-profile-img mr-2" alt="" src="assets/images/faces/face1.jpg" /> <span class="profile-name">Henry Klein</span> </a> <div class="dropdown-menu navbar-dropdown w-100" aria-labelledby="profileDropdown"> <a class="dropdown-item" href="#"> <i class="mdi mdi-cached mr-2 text-success"></i> Activity Log </a> <a class="dropdown-item" href="#"> <i class="mdi mdi-logout mr-2 text-primary"></i> Signout </a> </div> </li> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas"> <span class="mdi mdi-menu"></span> </button> </div> </nav> <div class="main-panel"> <div class="content-wrapper pb-0"> <div class="page-header flex-wrap"> <h3 class="mb-0"> Hi, welcome back! <span class="pl-0 h6 pl-sm-2 text-muted d-inline-block">Your web analytics dashboard template.</span> </h3> <div class="d-flex"> <button type="button" class="btn btn-sm bg-white btn-icon-text border"> <i class="mdi mdi-email btn-icon-prepend"></i> Email </button> <button type="button" class="btn btn-sm bg-white btn-icon-text border ml-3"> <i class="mdi mdi-printer btn-icon-prepend"></i> Print </button> <button type="button" class="btn btn-sm ml-3 btn-success"> Add User </button> </div> </div> <div class="row"> <div class="col-xl-3 col-lg-12 stretch-card grid-margin"> <div class="row"> <div class="col-xl-12 col-md-6 stretch-card grid-margin grid-margin-sm-0 pb-sm-3"> <div class="card bg-warning"> <div class="card-body px-3 py-4"> <div class="d-flex justify-content-between align-items-start"> <div class="color-card"> <p class="mb-0 color-card-head">Sales</p> <h2 class="text-white"> $8,753.<span class="h5">00</span> </h2> </div> <i class="card-icon-indicator mdi mdi-basket bg-inverse-icon-warning"></i> </div> <h6 class="text-white">18.33% Since last month</h6> </div> </div> </div> <div class="col-xl-12 col-md-6 stretch-card grid-margin grid-margin-sm-0 pb-sm-3"> <div class="card bg-danger"> <div class="card-body px-3 py-4"> <div class="d-flex justify-content-between align-items-start"> <div class="color-card"> <p class="mb-0 color-card-head">Margin</p> <h2 class="text-white"> $5,300.<span class="h5">00</span> </h2> </div> <i class="card-icon-indicator mdi mdi-cube-outline bg-inverse-icon-danger"></i> </div> <h6 class="text-white">13.21% Since last month</h6> </div> </div> </div> <div class="col-xl-12 col-md-6 stretch-card grid-margin grid-margin-sm-0 pb-sm-3 pb-lg-0 pb-xl-3"> <div class="card bg-primary"> <div class="card-body px-3 py-4"> <div class="d-flex justify-content-between align-items-start"> <div class="color-card"> <p class="mb-0 color-card-head">Orders</p> <h2 class="text-white"> $1,753.<span class="h5">00</span> </h2> </div> <i class="card-icon-indicator mdi mdi-briefcase-outline bg-inverse-icon-primary"></i> </div> <h6 class="text-white">67.98% Since last month</h6> </div> </div> </div> <div class="col-xl-12 col-md-6 stretch-card pb-sm-3 pb-lg-0"> <div class="card bg-success"> <div class="card-body px-3 py-4"> <div class="d-flex justify-content-between align-items-start"> <div class="color-card"> <p class="mb-0 color-card-head">Affiliate</p> <h2 class="text-white">2368</h2> </div> <i class="card-icon-indicator mdi mdi-account-circle bg-inverse-icon-success"></i> </div> <h6 class="text-white">20.32% Since last month</h6> </div> </div> </div> </div> </div> <div class="col-xl-9 stretch-card grid-margin"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-sm-7"> <h5>Business Survey</h5> <p class="text-muted"> Show overview jan 2018 - Dec 2019 <a class="text-muted font-weight-medium pl-2" href="#"><u>See Details</u></a> </p> </div> <div class="col-sm-5 text-md-right"> <button type="button" class="btn btn-icon-text mb-3 mb-sm-0 btn-inverse-primary font-weight-normal"> <i class="mdi mdi-email btn-icon-prepend"></i>Download Report </button> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="card mb-3 mb-sm-0"> <div class="card-body py-3 px-4"> <p class="m-0 survey-head">Today Earnings</p> <div class="d-flex justify-content-between align-items-end flot-bar-wrapper"> <div> <h3 class="m-0 survey-value">$5,300</h3> <p class="text-success m-0">-310 avg. sales</p> </div> <div id="earningChart" class="flot-chart"></div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card mb-3 mb-sm-0"> <div class="card-body py-3 px-4"> <p class="m-0 survey-head">Product Sold</p> <div class="d-flex justify-content-between align-items-end flot-bar-wrapper"> <div> <h3 class="m-0 survey-value">$9,100</h3> <p class="text-danger m-0">-310 avg. sales</p> </div> <div id="productChart" class="flot-chart"></div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <div class="card-body py-3 px-4"> <p class="m-0 survey-head">Today Orders</p> <div class="d-flex justify-content-between align-items-end flot-bar-wrapper"> <div> <h3 class="m-0 survey-value">$4,354</h3> <p class="text-success m-0">-310 avg. sales</p> </div> <div id="orderChart" class="flot-chart"></div> </div> </div> </div> </div> </div> <div class="row my-3"> <div class="col-sm-12"> <div class="flot-chart-wrapper"> <div id="flotChart" class="flot-chart"> <canvas class="flot-base"></canvas> </div> </div> </div> </div> <div class="row"> <div class="col-sm-8"> <p class="text-muted mb-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. <b>Learn More</b> </p> </div> <div class="col-sm-4"> <p class="mb-0 text-muted">Sales Revenue</p> <h5 class="d-inline-block survey-value mb-0"> $2,45,500 </h5> <p class="d-inline-block text-danger mb-0"> last 8 months </p> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xl-8 col-sm-6 grid-margin stretch-card"> <div class="card"> <div class="card-body px-0 overflow-auto"> <h4 class="card-title pl-4">Purchase History</h4> <div class="table-responsive"> <table class="table"> <thead class="bg-light"> <tr> <th>Customer</th> <th>Project</th> <th>Invoice</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td> <div class="d-flex align-items-center"> <img src="assets/images/faces/face1.jpg" alt="image" /> <div class="table-user-name ml-3"> <p class="mb-0 font-weight-medium"> Cecelia Cooper </p> <small> Payment on hold</small> </div> </div> </td> <td>Angular Admin</td> <td> <div class="badge badge-inverse-success"> Completed </div> </td> <td>$ 77.99</td> </tr> <tr> <td> <div class="d-flex align-items-center"> <img src="assets/images/faces/face10.jpg" alt="image" /> <div class="table-user-name ml-3"> <p class="mb-0 font-weight-medium"> Victor Watkins </p> <small>Email verified</small> </div> </div> </td> <td>Angular Admin</td> <td> <div class="badge badge-inverse-success"> Completed </div> </td> <td>$245.30</td> </tr> <tr> <td> <div class="d-flex align-items-center"> <img src="assets/images/faces/face11.jpg" alt="image" /> <div class="table-user-name ml-3"> <p class="mb-0 font-weight-medium"> Ada Burgess </p> <small>Email verified</small> </div> </div> </td> <td>One page html</td> <td> <div class="badge badge-inverse-danger"> Completed </div> </td> <td>$ 160.25</td> </tr> <tr> <td> <div class="d-flex align-items-center"> <img src="assets/images/faces/face13.jpg" alt="image" /> <div class="table-user-name ml-3"> <p class="mb-0 font-weight-medium"> Dollie Lynch </p> <small>Email verified</small> </div> </div> </td> <td>Wordpress</td> <td> <div class="badge badge-inverse-success"> Declined </div> </td> <td>$ 123.21</td> </tr> <tr> <td> <div class="d-flex align-items-center"> <img src="assets/images/faces/face16.jpg" alt="image" /> <div class="table-user-name ml-3"> <p class="mb-0 font-weight-medium"> Harry Holloway </p> <small>Payment on process</small> </div> </div> </td> <td>VueJs Application</td> <td> <div class="badge badge-inverse-danger"> Declined </div> </td> <td>$ 150.00</td> </tr> </tbody> </table> </div> <a class="text-black mt-3 d-block pl-4" href="#"> <span class="font-weight-medium h6">View all order history</span> <i class="mdi mdi-chevron-right"></i></a> </div> </div> </div> <div class="col-xl-4 col-sm-6 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <div class="card-title font-weight-medium"> Business Survey </div> <p class="text-muted"> Lorem ipsum dolor sitadipiscing elit, sed amet do eiusmod tempor we find a new solution </p> <div class="d-flex flex-wrap border-bottom py-2 border-top justify-content-between"> <img class="survey-img mb-lg-3" src="assets/images/dashboard/img_3.jpg" alt="" /> <div class="pt-2"> <h5 class="mb-0">Villa called Archagel</h5> <p class="mb-0 text-muted">St, San Diego, CA</p> <h5 class="mb-0">$600/mo</h5> </div> </div> <div class="d-flex flex-wrap border-bottom py-2 justify-content-between"> <img class="survey-img mb-lg-3" src="assets/images/dashboard/img_1.jpg" alt="" /> <div class="pt-2"> <h5 class="mb-0">Luxury villa in Hermo</h5> <p class="mb-0 text-muted">Glendale, CA</p> <h5 class="mb-0">$900/mo</h5> </div> </div> <div class="d-flex flex-wrap border-bottom py-2 justify-content-between"> <img class="survey-img mb-lg-3" src="assets/images/dashboard/img_2.jpg" alt="" /> <div class="pt-2"> <h5 class="mb-0">House on the Clarita</h5> <p class="mb-0 text-muted">Business Survey</p> <h5 class="mb-0">$459/mo</h5> </div> </div> <a class="text-black mt-3 d-block font-weight-medium h6" href="#">View all <i class="mdi mdi-chevron-right"></i></a> </div> </div> </div> </div> <div class="row"> <div class="col-xl-4 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title text-black">To do Task List</h4> <p class="text-muted">Created by anonymous</p> <div class="list-wrapper"> <ul class="d-flex flex-column-reverse todo-list todo-list-custom"> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" /> Meeting with Alisa </label> <span class="list-time">4 Hours Ago</span> </div> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" /> Create invoice </label> <span class="list-time">6 Hours Ago</span> </div> </li> <li class="completed"> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" checked /> Prepare for presentation </label> <span class="list-time">2 Hours Ago</span> </div> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" /> Pick up kids from school </label> <span class="list-time">8 Hours Ago</span> </div> </li> </ul> </div> <div class="add-items d-flex flex-wrap flex-sm-nowrap"> <input type="text" class="form-control todo-list-input flex-grow" placeholder="Add task name" /> <button class="add btn btn-primary font-weight-regular text-nowrap" id="add-task"> Add Task </button> </div> </div> </div> </div> <div class="col-xl-4 col-md-6 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title text-black">Recent Customers</h4> <p class="text-muted">All contacts</p> <div class="row pt-2 pb-1"> <div class="col-12 col-sm-7"> <div class="row"> <div class="col-4 col-md-4"> <img class="customer-img" src="assets/images/faces/face22.jpg" alt="" /> </div> <div class="col-8 col-md-8 p-sm-0"> <h6 class="mb-0">Cecelia Cooper</h6> <p class="text-muted font-12">05:58AM</p> </div> </div> </div> <div class="col-sm-5 pl-0"> <canvas id="areaChart1"></canvas> </div> </div> <div class="row py-1"> <div class="col-sm-7"> <div class="row"> <div class="col-4 col-sm-4"> <img class="customer-img" src="assets/images/faces/face25.jpg" alt="" /> </div> <div class="col-8 col-sm-8 p-sm-0"> <h6 class="mb-0">Victor Watkins</h6> <p class="text-muted font-12">05:28AM</p> </div> </div> </div> <div class="col-sm-5 pl-0"> <canvas id="areaChart2"></canvas> </div> </div> <div class="row py-1"> <div class="col-sm-7"> <div class="row"> <div class="col-4 col-sm-4"> <img class="customer-img" src="assets/images/faces/face15.jpg" alt="" /> </div> <div class="col-8 col-sm-8 p-sm-0"> <h6 class="mb-0">Ada Burgess</h6> <p class="text-muted font-12">05:57AM</p> </div> </div> </div> <div class="col-sm-5 pl-0"> <canvas id="areaChart3"></canvas> </div> </div> <div class="row py-1"> <div class="col-sm-7"> <div class="row"> <div class="col-4 col-sm-4"> <img class="customer-img" src="assets/images/faces/face5.jpg" alt="" /> </div> <div class="col-8 col-sm-8 p-sm-0"> <h6 class="mb-0">Dollie Lynch</h6> <p class="text-muted font-12">05:59AM</p> </div> </div> </div> <div class="col-sm-5 pl-0"> <canvas id="areaChart4"></canvas> </div> </div> <div class="row"> <div class="col-sm-7"> <div class="row"> <div class="col-4 col-sm-4"> <img class="customer-img" src="assets/images/faces/face2.jpg" alt="" /> </div> <div class="col-8 col-sm-8 p-sm-0"> <h6 class="mb-0">Harry Holloway</h6> <p class="text-muted font-12 mb-0">05:13AM</p> </div> </div> </div> <div class="col-sm-5 pl-0"> <canvas id="areaChart5" height="100"></canvas> </div> </div> </div> </div> </div> <div class="col-xl-4 col-md-6 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <h4 class="card-title text-black">Business Survey</h4> <p class="text-muted pb-2">Jan 01 2019 - Dec 31 2019</p> <canvas id="surveyBar"></canvas> <div class="row border-bottom pb-3 pt-4 align-items-center mx-0"> <div class="col-sm-9 pl-0"> <div class="d-flex"> <img src="assets/images/dashboard/img_4.jpg" alt="" /> <div class="pl-2"> <h6 class="m-0">Red Chair</h6> <p class="m-0">Home Decoration</p> </div> </div> </div> <div class="col-sm-3 pl-0 pl-sm-3"> <div class="badge badge-inverse-success mt-3 mt-sm-0"> +7.7% </div> </div> </div> <div class="row py-3 align-items-center mx-0"> <div class="col-sm-9 pl-0"> <div class="d-flex"> <img src="assets/images/dashboard/img_5.jpg" alt="" /> <div class="pl-2"> <h6 class="m-0">Gray Sofa</h6> <p class="m-0">Home Decoration</p> </div> </div> </div> <div class="col-sm-3 pl-0 pl-sm-3"> <div class="badge badge-inverse-success mt-3 mt-sm-0"> +7.7% </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xl-8 grid-margin stretch-card"> <div class="card card-calender"> <div class="card-body"> <div class="row pt-4"> <div class="col-sm-6"> <h1 class="text-white">10:16PM</h1> <h5 class="text-white">Monday 25 October, 2016</h5> <h5 class="text-white pt-2 m-0">Precipitation:50%</h5> <h5 class="text-white m-0">Humidity:23%</h5> <h5 class="text-white m-0">Wind:13 km/h</h5> </div> <div class="col-sm-6 text-sm-right pt-3 pt-sm-0"> <h3 class="text-white">Clear Sky</h3> <p class="text-white m-0">London, UK</p> <h3 class="text-white m-0">21°C</h3> </div> </div> <div class="row mt-5"> <div class="col-sm-12"> <ul class="d-flex pl-0 overflow-auto"> <li class="weakly-weather-item text-white font-weight-medium text-center active"> <p class="mb-0">TODAY</p> <i class="mdi mdi-weather-cloudy"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">MON</p> <i class="mdi mdi-weather-hail"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">TUE</p> <i class="mdi mdi-weather-cloudy"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">WED</p> <i class="mdi mdi-weather-fog"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">THU</p> <i class="mdi mdi-weather-hail"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">FRI</p> <i class="mdi mdi-weather-cloudy"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">SAT</p> <i class="mdi mdi-weather-hail"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> <li class="weakly-weather-item text-white font-weight-medium text-center"> <p class="mb-0">SUN</p> <i class="mdi mdi-weather-cloudy"></i> <p class="mb-0">21<span class="symbol">°c</span></p> </li> </ul> </div> </div> </div> </div> </div> <div class="col-xl-4 grid-margin stretch-card"> <!--activity--> <div class="card"> <div class="card-body"> <h4 class="card-title"> <span class="d-flex justify-content-between"> <span>Activity</span> <span class="dropdown dropleft d-block"> <span id="dropdownMenuButton1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span><i class="mdi mdi-dots-horizontal"></i></span> </span> <span class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <a class="dropdown-item" href="#">Contact</a> <a class="dropdown-item" href="#">Helpdesk</a> <a class="dropdown-item" href="#">Chat with us</a> </span> </span> </span> </h4> <ul class="gradient-bullet-list border-bottom"> <li> <h6 class="mb-0"> It's awesome when we find a new solution </h6> <p class="text-muted">2h ago</p> </li> <li> <h6 class="mb-0">Report has been updated</h6> <p class="text-muted"> <span>2h ago</span> <span class="d-inline-block"> <span class="d-flex d-inline-block"> <img class="ml-1" src="assets/images/faces/face1.jpg" alt="" /> <img class="ml-1" src="assets/images/faces/face10.jpg" alt="" /> <img class="ml-1" src="assets/images/faces/face14.jpg" alt="" /> </span> </span> </p> </li> <li> <h6 class="mb-0"> Analytics dashboard has been created#Slack </h6> <p class="text-muted">2h ago</p> </li> <li> <h6 class="mb-0"> It's awesome when we find a new solution </h6> <p class="text-muted">2h ago</p> </li> </ul> <a class="text-black mt-3 mb-0 d-block h6" href="#">View all <i class="mdi mdi-chevron-right"></i></a> </div> </div> <!--activity ends--> </div> </div> <div class="row"> <div class="col-xl-4 col-md-6 grid-margin stretch-card"> <div class="card card-invoice"> <div class="card-body"> <h4 class="card-title pb-3">Pending invoices</h4> <div class="list-card"> <div class="row align-items-center"> <div class="col-7 col-sm-8"> <div class="row align-items-center"> <div class="col-sm-4"> <img src="assets/images/faces/face2.jpg" alt="" /> </div> <div class="col-sm-8 pr-0 pl-sm-0"> <span>06 Jan 2019</span> <h6 class="mb-1 mb-sm-0">Isabel Cross</h6> </div> </div> </div> <div class="col-5 col-sm-4"> <div class="d-flex pt-1 align-items-center"> <div class="reload-outer bg-info"> <i class="mdi mdi-reload"></i> </div> <div class="dropdown dropleft pl-1 pt-3"> <div id="dropdownMenuButton2" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <p><i class="mdi mdi-dots-vertical"></i></p> </div> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <a class="dropdown-item" href="#">Sales</a> <a class="dropdown-item" href="#">Track Invoice</a> <a class="dropdown-item" href="#">Payment History</a> </div> </div> </div> </div> </div> </div> <div class="list-card"> <div class="row align-items-center"> <div class="col-7 col-sm-8"> <div class="row align-items-center"> <div class="col-sm-4"> <img src="assets/images/faces/face3.jpg" alt="" /> </div> <div class="col-sm-8 pr-0 pl-sm-0"> <span>18 Mar 2019</span> <h6 class="mb-1 mb-sm-0">Carrie Parker</h6> </div> </div> </div> <div class="col-5 col-sm-4"> <div class="d-flex pt-1 align-items-center"> <div class="reload-outer bg-primary"> <i class="mdi mdi-reload"></i> </div> <div class="dropdown dropleft pl-1 pt-3"> <div id="dropdownMenuButton3" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <p><i class="mdi mdi-dots-vertical"></i></p> </div> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3"> <a class="dropdown-item" href="#">Sales</a> <a class="dropdown-item" href="#">Track Invoice</a> <a class="dropdown-item" href="#">Payment History</a> </div> </div> </div> </div> </div> </div> <div class="list-card"> <div class="row align-items-center"> <div class="col-7 col-sm-8"> <div class="row align-items-center"> <div class="col-sm-4"> <img src="assets/images/faces/face11.jpg" alt="" /> </div> <div class="col-sm-8 pr-0 pl-sm-0"> <span>10 Apr 2019</span> <h6 class="mb-1 mb-sm-0">Don Bennett</h6> </div> </div> </div> <div class="col-5 col-sm-4"> <div class="d-flex pt-1 align-items-center"> <div class="reload-outer bg-warning"> <i class="mdi mdi-reload"></i> </div> <div class="dropdown dropleft pl-1 pt-3"> <div id="dropdownMenuButton4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <p><i class="mdi mdi-dots-vertical"></i></p> </div> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4"> <a class="dropdown-item" href="#">Sales</a> <a class="dropdown-item" href="#">Track Invoice</a> <a class="dropdown-item" href="#">Payment History</a> </div> </div> </div> </div> </div> </div> <div class="list-card"> <div class="row align-items-center"> <div class="col-7 col-sm-8"> <div class="row align-items-center"> <div class="col-sm-4"> <img src="assets/images/faces/face3.jpg" alt="" /> </div> <div class="col-sm-8 pr-0 pl-sm-0"> <span>18 Mar 2019</span> <h6 class="mb-1 mb-sm-0">Carrie Parker</h6> </div> </div> </div> <div class="col-5 col-sm-4"> <div class="d-flex pt-1 align-items-center"> <div class="reload-outer bg-info"> <i class="mdi mdi-reload"></i> </div> <div class="dropdown dropleft pl-1 pt-3"> <div id="dropdownMenuButton5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <p><i class="mdi mdi-dots-vertical"></i></p> </div> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton5"> <a class="dropdown-item" href="#">Sales</a> <a class="dropdown-item" href="#">Track Invoice</a> <a class="dropdown-item" href="#">Payment History</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-xl-4 col-md-6 grid-margin stretch-card"> <!--datepicker--> <div class="card"> <div class="card-body"> <div id="inline-datepicker" class="datepicker table-responsive"></div> </div> </div> <!--datepicker ends--> </div> <div class="col-xl-4 col-md-6 stretch-card grid-margin stretch-card"> <!--browser stats--> <div class="card"> <div class="card-body"> <h4 class="card-title">Browser stats</h4> <div class="row py-2"> <div class="col-sm-12"> <div class="d-flex justify-content-between pb-3 border-bottom"> <div> <img class="mr-2" src="assets/images/browser-logo/opera-logo.png" alt="" /> <span class="p">opera mini</span> </div> <p class="mb-0">23%</p> </div> </div> </div> <div class="row py-2"> <div class="col-sm-12"> <div class="d-flex justify-content-between pb-3 border-bottom"> <div> <img class="mr-2" src="assets/images/browser-logo/safari-logo.png" alt="" /> <span class="p">Safari</span> </div> <p class="mb-0">07%</p> </div> </div> </div> <div class="row py-2"> <div class="col-sm-12"> <div class="d-flex justify-content-between pb-3 border-bottom"> <div> <img class="mr-2" src="assets/images/browser-logo/chrome-logo.png" alt="" /> <span class="p">Chrome</span> </div> <p class="mb-0">33%</p> </div> </div> </div> <div class="row py-2"> <div class="col-sm-12"> <div class="d-flex justify-content-between pb-3 border-bottom"> <div> <img class="mr-2" src="assets/images/browser-logo/firefox-logo.png" alt="" /> <span class="p">Firefox</span> </div> <p class="mb-0">17%</p> </div> </div> </div> <div class="row py-2"> <div class="col-sm-12"> <div class="d-flex justify-content-between"> <div> <img class="mr-2" src="assets/images/browser-logo/explorer-logo.png" alt="" /> <span class="p">Explorer</span> </div> <p class="mb-0">05%</p> </div> </div> </div> </div> </div> <!--browser stats ends--> </div> </div> </div> <footer class="footer"> <div class="d-sm-flex justify-content-center justify-content-sm-between"> <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2020 <a href="https://www.bootstrapdash.com/" target="_blank">BootstrapDash</a>. All rights reserved.</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="mdi mdi-heart text-danger"></i></span> </div> </footer> </div> <!-- main-panel ends --> </div> <!-- page-body-wrapper ends --> </div> <!-- container-scroller --> <!-- plugins:js --> <script src="assets/vendors/js/vendor.bundle.base.js"></script> <!-- endinject --> <!-- Plugin js for this page --> <script src="assets/vendors/chart.js/Chart.min.js"></script> <script src="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script> <script src="assets/vendors/flot/jquery.flot.js"></script> <script src="assets/vendors/flot/jquery.flot.resize.js"></script> <script src="assets/vendors/flot/jquery.flot.categories.js"></script> <script src="assets/vendors/flot/jquery.flot.fillbetween.js"></script> <script src="assets/vendors/flot/jquery.flot.stack.js"></script> <script src="assets/vendors/flot/jquery.flot.pie.js"></script> <!-- End plugin js for this page --> <!-- inject:js --> <script src="assets/js/off-canvas.js"></script> <script src="assets/js/hoverable-collapse.js"></script> <script src="assets/js/misc.js"></script> <!-- endinject --> <!-- Custom js for this page --> <script src="assets/js/dashboard.js"></script> <!-- End custom js for this page --> </body> </html>

### Components

#### Basic UI Elements

##### Button with single color

<div class="row"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> </div>

##### Outlined

<div class="row"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> </div>

##### Sizes

<div class="row"> <button type="button" class="btn btn-primary btn-lg">Small</button> <button type="button" class="btn btn-secondary">Medium</button> <button type="button" class="btn btn-success btn-sm">Large</button> </div>

##### Bootstrap Dropdown

<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Dropdown Outlined

<div class="btn-group"> <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

#### Tables

To create a basic Twitter Bootstrap table, add the following code.

<table class="table"> <thead> <tr class=""> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row">2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td scope="row">3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

#### Charts

Chart.js is a simple yet flexible JavaScript charting for designers & developers.

##### Usage

To use Chart.js in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" />

and the following script files in <body>.

<script src="path-to/node_modules/chart.js/dist/Chart.min.js"></script>

To create a simple chart, add the following code:

<canvas id="lineChart" style="height:250px"></canvas> <script> var data = { labels: ["Red", "Blue", "Yellow", "Green", "Breeze-free", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }; var options = { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, legend: { display: false }, elements: { point: { radius: 0 } } }; if ($("#lineChart").length) { var lineChartCanvas = $("#lineChart").get(0).getContext("2d"); var lineChart = new Chart(lineChartCanvas, { type: 'line', data: data, options: options }); } </script>

#### Forms

The basic form elements can be added to your application as below:

<form class="forms-sample"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control p-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted text-success"><span class="fa fa-info mt-1"></span> We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control p-input" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleTextarea">Example textarea</label> <textarea class="form-control p-input" id="exampleTextarea" rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> </div> <fieldset class="form-group"> <legend class="mb-4 mt-5">Radio buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> <div class="form-check col-12"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Check me out </label> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>

#### Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

##### Usage

To use Material Design Icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/mdi/css/materialdesignicons.min.css"/>

To generate an icon, add the following code:

<i class="mdi mdi-bell"></i>