Documentation

A how-to guide and helpful informations about configuration and options in theme.

INTRODUCTION

Thank you for purchasing Amaze, a template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3. If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Amaze and provide a consistent look throughout the template.

This documentation will provide information on how the template is structured and configuration of various components that are bundled with the template.

Before you start working with the template, we suggest you to 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.

Built with SaSS. This theme uses the Sass compiler to make it easier to customize and use. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

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 problems with this theme please use Envato Marketplace contact form on our profile or email us at [email protected]

GETTING STARTED

You can directly use the compiled and ready to use version of the template. But in case you plan to customize the template extensively the template allows you to do so! This section will get you initiated on this.

File Hierarchy

The downloaded package will have the following structure. If you don't want to customize the template you can use the files as is after removing the 'sass' folder in 'assets'. Just unzip the files you just bought, go the pages folder, open the index.html file in a web browser and you are ready to go.

In case you wish to customize the styles you may do it by modifying .scss files provided in the 'sass' folder. More details on this is provided in the next section.


Amaze/
├── ../assets/
│   ├── css/
│   ├── fonts/
│   ├── img/
│   ├── css/
│   ├── sass/
│   └── vendors/
│
└── pages/
    └─── Amaze HTML pages

Modifying Sass Files

In case you plan to customize the template extensively, you can make changes to .scss files. We use the grunt task manager for the build processes. Grunt will watch for changes to .scss files and automatically compile the files to CSS. For this you need to install Node.JS and Grunt. Use of these tools is completely optional and only required if you want to modify the .scss files.

Dependencies

To get started you will need to install the following items

  • Ruby - to get Sass
  • NodeJs - to get npm (For managing our dependences)
  • Grunt - for task management.
Ruby and Sass

You can use several tools to install Ruby. Follow instructions here for installing Ruby.

If you are using windows you will have to install Ruby, the Ruby Installer is pretty painless, be sure to check the “Add Ruby executable to your PATH” option.

To install Sass on your computer, simply follow the instructions on the sass-lang.com website.

Node.js and NPM

You can download Node.js from here. Npm comes bundled with Node.js

Grunt

Getting started with grunt is pretty simple. The Grunt site is a great place to get information on installing Grunt if you need more information.

You need to first install Grunt using the below command

npm install -g grunt-cli

This installs the Grunt commandline interface globally to your machine so that you can access it.

Once this is setup there are a few ways to get started.

Option 1:
Using the commandline cd into projects root directory. You can simply run npm install and all the dependencies will be installed based on package.json file in the root folder of the template.

Option 2:
You can start fresh by running npm init on the commandline from your project root. This will set up the package.json file for you.

For options 2, you will need to run npm install grunt --save-dev and grunt will be added to your devDependencies in the pacakge.json file. The --save-dev flag saves grunt into your package.json file, this way you can share this file and have everyone on the project using the same dependencies.

More information about the package.json file can be found here.

If you ran npm init, you will need to install grunt and then a few other packages. grunt-contrib-sass, grunt-contrib-watch.

To do this run the command npm install <package> --save-dev. Where <package> is what you need to add. Example npm install grunt-contrib-sass --save-dev

grunt-contrib-sass: This task is pretty straight forward. It is used to actually compile your scss files to css.

grunt-contrib-watch: This is a task that you can run, so that we can watch our folder, whenever a file changes we can configure this task to run other tasks, say compile our Sass files.

Your package.json should now look something like this:


"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4"
}

The other thing that grunt requires, which, is really what does all the work, is the Gruntfile.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.

Compile

Before you start modifying .scss files, make sure that you go to the root folder of the template and run the grunt command

This will start the file watch by grunt and whenever a file is modified .scss files will be compiled to create the css file

TEMPLATE STRUCTURE

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu and page content.

The basic HTML structure is as shown below. You can add different components to suit your needs. You will find a blank page template in the pages folder. You can modify header, top menu and side bar menu of this page and start using it as the basic page template for your project.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png" />
    <link rel="icon" type="image/png" href="../assets/img/favicon.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Amaze - Bootstrap Admin Dashboard Template</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <!-- Bootstrap core CSS     -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <!--  Paper Dashboard CSS    -->
    <link href="../assets/css/amaze.css" rel="stylesheet" />
    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="../assets/css/demo.css" rel="stylesheet" />
    <!--     Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
    <link href="../assets/css/themify-icons.css" rel="stylesheet">
</head>

<body>
    <div class="wrapper">
		<div class="sidebar" data-background-color="brown" data-active-color="danger">
            <div class="logo">
                <a href="#" class="simple-text">
                    Amaze Admin
                </a>
            </div>
            <div class="logo logo-mini">
                <a href="#" class="simple-text">
                    A
                </a>
            </div>
            <div class="sidebar-wrapper">
				<ul class="nav">
                    <li>
                        <a href="../index.html">
                            <i class="ti-panel"></i>
                            <p>Dashboard</p>
                        </a>
                    </li>
				</ul>

            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar navbar-default"> //add class .navbar-fixed for a sticky navbar
                <div class="container-fluid">
                    <div class="navbar-minimize">
                        <button id="minimizeSidebar" class="btn btn-round btn-white btn-fill btn-just-icon">
							<i class="ti-arrow-left"></i>
                        </button>
                    </div>
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"> Tabs </a>
                    </div>
                    <div class="collapse navbar-collapse">

                    </div>
                </div>
            </nav>
            <div class="content">
                <div class="container-fluid">

                </div>
            </div>
            <footer class="footer">
                <div class="container-fluid">

                </div>
            </footer>
        </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/vendors/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../assets/vendors/jquery-ui.min.js" type="text/javascript"></script>
<script src="../assets/vendors/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/vendors/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>

<!-- Amaze Admin javascript methods -->
<script src="../assets/js/amaze.js"></script>
<!-- Amaze Admin DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>

</html>
                                

Widgets

Here is a list of widgets that can be used to build your application faster.

Task List

Create tasklists easily using the below HTML markup

<table class="table">
	<tbody>
		<tr>
			<td>
				<div class="checkbox">
					<label>
						<input type="checkbox" name="optionsCheckboxes" checked>
					</label>
				</div>
			</td>
			<td>Task Description goes here</td>
			<td class="td-actions text-right">
				<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-simple btn-xs">
					<i class="material-icons">edit</i>
				</button>
				<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
					<i class="material-icons">close</i>
				</button>
			</td>
		</tr>
		......
	</tbody>
</table>
                                

Chat

Chat HTML markup

<div class="card card-chat">
	<div class="header">
		<h4 class="title">Chat</h4>
		<p class="category">With Mike Tyson</p>
	</div>
	<div class="content">
		<ol class="chat">
			<li class="other">
				<div class="avatar">
				  <img src="../assets/img/faces/avatar.png" alt="crash"/>
			  </div>
				<div class="msg">
					<p>
						Hello!
						How are you?
					</p>
					<div class="card-footer">
						<i class="ti-check"></i>
						<h6>7:10</h6>
					</div>
			  </div>
			</li>
			<li class="self">
				<div class="msg">
					<p>
						Hey!
						I'm good. How are you?
					</p>
					<div class="card-footer">
						<i class="ti-check"></i>
						<h6>7:21</h6>
					</div>
				</div>
				<div class="avatar">
					<img src="../assets/img/faces/avatar.png" alt="crash"/>
				</div>
			</li>
		</ol>
		<hr>
		<div class="send-message">
			<div class="avatar">
				<img src="../assets/img/faces/avatar.png" alt="crash"/>
			</div>
			<input class="form-control textarea" type="text" placeholder="Type here!"/>
			<div class="send-button">
				<button class="btn btn-primary btn-fill">Send</button>
			</div>
		</div>
	</div>
</div>
                                

Timeline

Timeline HTML markup

<ul class="timeline timeline-simple">
	<li class="timeline-inverted">
		<div class="timeline-image danger">
			<img src="../assets/img/faces/avatar.jpg" >
		</div>
		<div class="timeline-panel">
			<div class="timeline-heading">
				<span class="label label-danger">Some title</span>
			</div>
			<div class="timeline-body">
				<p>Your content goes here...</p>
			</div>
			<h6>
				<i class="ti-time"></i> 11 hours ago via Twitter
			</h6>
		</div>
	</li>
	...
</ul>
                                

Shopping Cart

Shopping Cart HTML markup

<div class="table-responsive">
	<table class="table table-shopping">
		<thead>
			<tr>
				<th class="text-center"></th>
				<th>Product</th>
				<th class="text-right">Price</th>
				<th class="text-right">Qty</th>
				<th class="text-right">Amount</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<div class="img-container">
						<img src="../assets/img/product-image.jpg" alt="...">
					</div>
				</td>
				<td class="td-name">
					<a href="#jacket">Product Name</a>
					<br />
					<small>by Vendor Name</small>
				</td>
				<td class="td-number text-right">
					<small>&euro;</small>549
				</td>
				<td class="td-number">
					1
				</td>
				<td class="td-number">
					<small>&euro;</small>549
				</td>
				<td class="td-actions">
					<button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
						<i class="material-icons">close</i>
					</button>
				</td>
			</tr>

			<tr>
				<td colspan="3"></td>
				<td class="td-total">
					Total
				</td>
				<td colspan="1" class="td-price">
					<small>&euro;</small>2,346
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="4"></td>
				<td colspan="2" class="text-right">
					<button type="button" class="btn btn-info btn-round">Proceed To Checkout <i class="material-icons">keyboard_arrow_right</i></button>
				</td>
			</tr>
		</tbody>
	</table>
</div>
                                

Google Maps

Google map HTML markup

<div id="regularMap" class="map"></div>
                                

Javascript

// Regular Map
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
	zoom: 8,
	center: myLatlng,
	scrollwheel: false,
}

var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);

var marker = new google.maps.Marker({
	position: myLatlng,
	title:"Regular Map!"
});

marker.setMap(map);
                                

FullCalendar

Basic Usage

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the <head> of your page:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

jQuery and Moment must be loaded before FullCalendar's JavaScript.

Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery's $(document).ready like so:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

The above code should be in a <script> tag in the head of your page. The code relies on there being an element with an id of "calendar" in the body of your page. The calendar will be placed inside this div:

<div id='calendar'></div>

An that's it, you should see a month-based calendar that has no events on it.

Please checkout full documentation for more features.

Pricing Table

 <div class="row">
	<div class="col-sm-3">
		<div class="card price-table">
			<div class="pt-top-bar"></div>
			<div class="pt-header">
				<h4 class="text-uppercase">Starter Plan</h4>
				<h2>
					<sup class="f-22">$</sup>
					<span class="f-50">99</span>
					<span class="f-14">/ mo</span>
				</h2>
			</div>
			<ul class="pt-body list-group text-left">
				<li class="list-group-item">
					<i class="material-icons">check</i> Feature 1
				</li>
				...
			</ul>
			<div class="pt-footer text-center">
				<a href="" class="btn">Start your free trial</a>
			</div>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="card price-table recommended">
			<div class="pt-top-bar"></div>
			<div class="pt-header">
				<h4 class="text-uppercase">Premium Plan</h4>
				<h2>
					<sup class="f-22">$</sup>
					<span class="f-50">179</span>
					<span class="f-14">/ mo</span>
				</h2>
			</div>
			<ul class="pt-body list-group text-left">
				<li class="list-group-item">
					<i class="material-icons">check</i> Feature 1
				</li>
				...
			</ul>
			<div class="pt-footer text-center">
				<a href="" class="btn">Start your free trial</a>
			</div>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="card price-table">
			...
		</div>
	</div>

	<div class="col-sm-3">
		<div class="card price-table">
			...
		</div>
	</div>
</div>

Charts

Chart.js

Simple yet flexible JavaScript charting for designers & developers.

Usage

To import Chart.js using an old-school script tag:

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

To import Chart.js using an awesome module loader:


// Using CommonJS
var Chart = require('src/chart.js')
var myChart = new Chart({...})

// ES6
import Chart from 'src/chart.js'
let myChart = new Chart({...})

// Using requirejs
require(['path/to/Chartjs'], function(Chart){
 var myChart = new Chart({...})
})

Creating a Chart

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.

<canvas id="myChart" width="400" height="400"></canvas>

// Any of the following formats may be used
var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
var ctx = $("#myChart");
var ctx = "myChart";

Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!

The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "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
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.

There are many examples of Chart.js that are available in the /samples folder of Chart.js.zip that is attatched to every release.

Chart Configuration

Chart.js provides a number of options for changing the behaviour of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point.

Chart Data

To display data, the chart must be passed a data object that contains all of the information needed by the chart. The data object can contain the following parameters

Name Type Description
datasets Array[object] Contains data for each dataset. See the documentation for each chart type to determine the valid options that can be attached to the dataset
labels Array[string] Optional parameter that is used with the category axis.
xLabels Array[string] Optional parameter that is used with the category axis and is used if the axis is horizontal
yLabels Array[string] Optional parameter that is used with the category axis and is used if the axis is vertical
Creating a Chart with Options

To create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive.

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        responsive: false
    }
});

Please refer to http://www.chartjs.org/docs/ for detailed documentation

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Usage

Include jquery.flot.js into your document.

<script src="../../vendors/charts/flot/jquery.flot.js"></script>
									
The markup

<div id="doc-line-chart" style="width:50%;height:300px" ></div>
											
Call the plugin

Finally you need to initiate the plugin by adding the following code.

var d1 = [[0,30],[1,35],[2,35],[3,30],[4,30],[5,35],[6,32],[7,37],[8,30],[9,35],[10,30],[11,31]];
var d2 = [[0,50],[1,40],[2,45],[3,60],[4,50],[5,50],[6,60],[7,55],[8,50],[9,50],[10,60],[11,35]];
var d3 = [[0,40],[1,50],[2,35],[3,25],[4,40],[5,45],[6,55],[7,50],[8,35],[9,40],[10,48],[11,40]];


//Chart Options

var options = {
	series: {
		shadowSize: 0,
		lines: {
			show: true,
		},
	},
	grid: {
		borderWidth: 1,
		labelMargin:10,
		mouseActiveRadius:6,
		borderColor: '#eee',
		show : true,
		hoverable : true,
		clickable : true

	},
	xaxis: {
		tickColor: '#fff',
		tickDecimals: 0,
		font :{
			lineHeight: 13,
			style: "normal",
			color: "#9f9f9f"
		},
		shadowSize: 0,
		ticks: [[0,"Jan"], [1,"Feb"], [2,"Mar"], [3,"Apr"], [4,"May"], [5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Oct"], [10,"Nov"], [11,"Dec"]]
	},

	yaxis: {
		tickColor: '#eee',
		tickDecimals: 0,
		font :{
			lineHeight: 13,
			style: "normal",
			color: "#9f9f9f",
		},
		shadowSize: 0
	},

	legend: {
		container: '.flc-line',
		backgroundOpacity: 0.5,
		noColumns: 0,
		backgroundColor: "white",
		lineWidth: 0
	},
	colors: ["#6baa01", "#33bdda", "#008ee4"]
};


// Create a regular Line Chart


$.plot($("#doc-line-chart"), [
	{data: d1, lines: { show: true  }, label: 'Product A', stack: true, color: '#F9D900' },
	{data: d2, lines: { show: true }, label: 'Product B', stack: true, color: '#A9E200' },
	{data: d3, lines: { show: true }, label: 'Product C', stack: true, color: '#22BAD9' }
], options);
											

Please refer to http://www.flotcharts.org// for detailed documentation

UI Elements

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.


Accordion displays collapsible content panels for presenting information in a limited amount of space. Amaze uses jQuery UI to implement the accordion. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Heading 1

Heading 2

Heading 3

<div id="simple-accordion" class="accordion">
	<h3 class="accordion-header">Heading 1</h3>
	<div class="accordion-content" data-wrapper="true" style="height: 0px; position: relative; overflow: hidden;" aria-expanded="false">
		<div>
			<p>Content goes here.</p>
		</div>
	</div>

	<h3 class="accordion-header">Heading 2</h3>
	<div class="accordion-content" data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
		<div>
			<p>Content goes here.</p>
		</div>
	</div>

	<h3 class="accordion-header">Heading 3</h3>
	<div class="accordion-content" data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
		<div>
			<p>Content goes here.</p>
		</div>
	</div>
</div>

Please refer to http://api.jqueryui.com/accordion/ for detailed documentation

Sweet Alert2 (Dialogs)

A beautiful and customizable replacement for JavaScript's popup boxes Supported fork of t4t5/sweetalert. SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable. Here is a basic example

swal("Here is a message!")

Please refer to http://limonte.github.io/sweetalert2/ for detailed documentation

Amaze use Paper design style for buttons, with various colors and options.

Basic Buttons

We use any of the available button classes to quickly create a styled button.

Bootstrap Default, disabled and customized Paper design Buttons
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success  btn-fill">Button Fill</button>
Button Sizes

You can have larger or smaller buttons by adding sizing classes.

<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-default btn-sm">Small</button>
<button class="btn btn-default btn-xs">Extra Small</button>

Button Dropdowns

<div class="dropdown">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Dropdown link</a></li>
		<li><a href="#">Dropdown link</a></li>
	</ul>
</div>

Button Icons and Shapes

<button class="btn btn-primary btn-icon-text"><i class="ti-home"></i> Home</button>
<button class="btn btn-primary btn-round"><i class="ti-heart"></i></button>

Button Groups

<div class="btn-group btn-group-lg" role="group">
	<button type="button" class="btn btn-primary">Left</button>
	<button type="button" class="btn btn-primary">Middle</button>
	<button type="button" class="btn btn-primary">Right</button>
</div>

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7.

Here is an example of an icon:

  1. <i class="ti-heart"></i>

See Themify Icons

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.


<!-- Button trigger modal -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
			Content goes here
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
								

<a data-toggle="modal" href="#modalDefault" class="btn btn-sm btn-default">Modal -
	Default</a>

Bootstrap Notify- This plugin helps to turn standard bootstrap alerts into "growl" like notifications.

This is a notification with close button.
<div class="alert alert-info">
	<button type="button" aria-hidden="true" class="close">
		<i class="material-icons">close</i>
	</button>
	<span>This is a notification with close button.</span>
</div>
								

HTML

<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>

Javascript

<script>
showNotification: function(from, align){
	type = ['','info','success','warning','danger','rose','primary'];

	color = Math.floor((Math.random() * 6) + 1);

	$.notify({
		icon: "notifications",
		message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."

	},{
		type: type[color],
		timer: 3000,
		placement: {
			from: from,
			align: align
		}
	});
}
</script>

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
HTML Markup
<div class="nav-tabs-navigation">
	<div class="nav-tabs-wrapper">
		<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
			<li class="active">
				<a href="#pill1" data-toggle="tab">Tab1</a>
			</li>
			<li>
				<a href="#pill2" data-toggle="tab">Tab2</a>
			</li>
			<li>
				<a href="#pill3" data-toggle="tab">Tab3</a>
			</li>
		</ul>
	</div>
</div>
<div class="tab-content">
	<div class="tab-pane active" id="pill1">
		Tab1 Content goes here.
	</div>
	<div class="tab-pane" id="pill2">
		Tab2 Content goes here.
	</div>
	<div class="tab-pane" id="pill3">
		Tab3 Content goes here.
	</div>
</div>
Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Amaze heading

h2. Amaze heading

h3. Amaze heading

h4. Amaze heading

h5. Amaze heading
h6. Amaze heading
<h1>h1. Amaze heading</h1>
<h2>h2. Amaze heading</h2>
<h3>h3. Amaze heading</h3>
<h4>h4. Amaze heading</h4>
<h5>h5. Amaze heading</h5>
<h6>h6. Amaze heading</h6>
Paragraph

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

<p>I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.</p>
Quote

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou
<blockquote>
	<p>
		I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
	</p>
	<small>
		Maya Angelou
	</small>
</blockquote>
Muted Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-muted">
	To live is the rarest thing in the world. Most people exist, that is all.
</p>
Primary Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-primary">
	To live is the rarest thing in the world. Most people exist, that is all. </p>
Info Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-info">
	To live is the rarest thing in the world. Most people exist, that is all. </p>
Success Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-success">
	To live is the rarest thing in the world. Most people exist, that is all. </p>
Warning Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-warning">
	To live is the rarest thing in the world. Most people exist, that is all.
</p>
Danger Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-danger">
	To live is the rarest thing in the world. Most people exist, that is all. </p>

Small Tag
Header with small subtitle
Use "small" tag for the headers
<h2>
	<h5>Small Tag</h5>
	Header with small subtitle
	<br>
	<small>Use "small" tag for the headers</small>
</h2>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
	<li>...
	</li>
</ul>
Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
	<li>...
	</li>
</ol>
Ordered - Roman
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol type="i">
	<li>...
	</li>
</ol>
Custom - 1
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="clist clist-angle">
	<li>...</li>
</ul>
Custom - 2
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="clist clist-check">
	<li>...</li>
</ul>

Forms

This section contains basic and advanced form elements, validations, sample forms and form wizard

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

A block of help text that breaks onto a new line.
<div class="form-group label-floating is-empty">
	<label class="control-label"></label>
	<input type="text" class="form-control" value>
	<span class="help-block">A block of help text that breaks onto a new line.</span>
</div>
<div class="form-group label-floating is-empty">
	<label class="control-label"></label>
	<input type="password" class="form-control" value>
</div>
<div class="form-group label-floating is-empty">
	<label class="control-label"></label>
	<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="form-group label-floating is-empty">
	<label class="control-label"></label>
	<input type="text" placeholder="Disabled input here..." disabled="" class="form-control">
</div>

www.example.com

<h5>Static control</h5>
<div class="form-group">
	<p class="form-control-static">www.example.com</p>
</div>
Checkboxes and radios
<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" value="">First Checkbox
</label>

<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" value="">Second Checkbox
</label>
<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadios" value="option1" checked="">First Radio
</label>

<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadios" value="option2">Second Radio
</label>
Inline checkboxes
<label class="checkbox checkbox-inline">
	<input type="checkbox" data-toggle="checkbox" value="option1">a
</label>
<label class="checkbox checkbox-inline">
	<input type="checkbox" data-toggle="checkbox" value="option2">b
</label>
<label class="checkbox checkbox-inline">
	<input type="checkbox" data-toggle="checkbox" value="option3">c
</label>

Custom Checkboxes & radios
<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" value="">
	Unchecked
</label>

<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" data-toggle="checkbox" value="" checked>
	Checked
</label>

<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" data-toggle="checkbox" value="" disabled>
	Disabled unchecked
</label>

<label class="checkbox">
	<input type="checkbox" data-toggle="checkbox" data-toggle="checkbox" value="" disabled checked>
	Disabled checked
</label>
<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadios2" value="">
	Radio is off
</label>
<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadios2"value="" checked>
	Radio is on
</label>

<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadiosDisabled2" value="" disabled>
	Disabled radio is off
</label>
<label class="radio">
	<input type="radio" data-toggle="radio" name="optionsRadiosDisabled2" value="" checked disabled>
	Disabled radio is on
</label>
Column sizing
<div class="row">
	<div class="col-md-3">
		<div class="form-group label-floating is-empty">
			<label class="control-label"></label>
			<input type="text" class="form-control" placeholder=".col-md-3">
		</div>
	</div>
	<div class="col-md-4">
		<div class="form-group label-floating is-empty">
			<label class="control-label"></label>
			<input type="text" class="form-control" placeholder=".col-md-4">
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group label-floating is-empty">
			<label class="control-label"></label>
			<input type="text" class="form-control" placeholder=".col-md-5">
		</div>
	</div>
</div>

See Form Elements Demo

DateTime Picker

Extend form controls by adding text or buttons before, after, or on both sides of any text-based inputs.

Basic Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
							

Custom Select

A custom select for Bootstrap using it's Dropdown component

Basic Example

HTML

	<legend>Select</legend>
	<div class="col-sm-6">
		<p>Basic Example</p>

		<div class="form-group">
			<div class="select">
				<select class="form-control">
					<option>Select an Option</option>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
			</div>
		</div>
	</div>
							

Disabled State

Javascript

<script src="../../vendors/bootstrap-select/dist/js/bootstrap-select.js"></script>
							

HTML

	<div class="col-sm-6">
		<p>Disabled State</p>

		<div class="form-group">
			<div class="select">
				<select class="form-control" disabled>
					<option>Select an Option</option>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
			</div>
		</div>
	</div>
							

HTML

		<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
			<option disabled selected>Choose city</option>
			<option value="2">Foobar</option>
			<option value="3">Is great</option>
		</select>


				

HTML

		<select class="selectpicker" data-style="select-with-transition" multiple title="Choose City" data-size="7">
			<option disabled> Choose city</option>
			<option value="2">Paris </option>
			<option value="3">Bucharest</option>
			<option value="4">Rome</option>
			<option value="5">New York</option>
			<option value="6">Miami </option>
		</select>

				

Toggle Switch

Default and Disabled options. Use the given data attribute to change the color scheme of the Toggle Switch


<input type="checkbox" checked data-toggle="switch" class="ct-primary"/>
<input type="checkbox" data-toggle="switch" />
							

Input Slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.


Javascript

<script src="../../vendors/nouislider/distribute/nouislider.min.js"></script>

							

HTML

<div id="input-slider" class="input-slider m-b-25"></div>
							


Simple File Input

The file input plugin allows you to create a visually appealing file or image input widgets


Basic Example

Select file Change ×

Javascript

<script src="../../vendors/fileinput/fileinput.min.js"></script>

							

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">
	<span class="btn btn-primary btn-file m-r-10">
		<span class="fileinput-new">Select file</span>
		<span class="fileinput-exists">Change</span>
		<input type="file" name="...">
	</span>
	<span class="fileinput-filename"></span>
	<a href="#" class="close fileinput-exists" data-dismiss="fileinput">&times;</a>
</div>
							

Drop Files (Dropzone.js)

Drop files here or click to upload.
(This is just a demo dropzone. Selected files are not actually uploaded.)

Javascript

<link href="../../vendors/dropzone/dropzone.min.css" rel="stylesheet">

<script src="../../vendors/dropzone/dropzone.min.js"></script>

							

HTML

<div id="dropzone">
	<form action="/upload" class="dropzone needsclick" id="demo-upload">
		<div class="dz-message needsclick">
		Drop files here or click to upload.<br />
		<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
		</div>
	</form>
</div>
							

Image Preview

Select image Change Remove

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">
	<div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>
	<div>
		<span class="btn btn-info btn-file">
			<span class="fileinput-new">Select image</span>
			<span class="fileinput-exists">Change</span>
			<input type="file" name="...">
		</span>
		<a href="#" class="btn btn-danger fileinput-exists"
		   data-dismiss="fileinput">Remove</a>
	</div>
</div>
							

Basic Example

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Input with success

<div class="form-group label-floating is-empty has-success">
	<label class="control-label"></label>
	<input type="text" class="form-control" value="Success">
	<span class="material-icons form-control-feedback">done</span>
</div>
                            

Input with error


<div class="form-group label-floating is-empty has-error">
	<label class="control-label"></label>
	<input type="text" class="form-control" value="Error Input">
	<span class="material-icons form-control-feedback">clear</span>
</div>
                            

Type Validation

required
email="true"
number="true"
url="true"
equalTo="#idSource"
<input class="form-control" type="text" name="required" required="required"/>
<input class="form-control" type="text" name="email" email="true"/>
<input class="form-control" type="text" name="number" number="true"/>
<input class="form-control" type="text" name="url" url="true" />
<input class="form-control" id="idSource" type="text" placeholder="#idSource"/>
<input class="form-control" id="idDestination" type="text" placeholder="#idDestination" equalTo="#idSource"/>
                            

Range validation

minLength="5"
maxLength="5"
range="[6,10]"
min="6"
max="6"
<input class="form-control" type="text" name="min_length" minLength="5"/>
<input class="form-control" type="text" name="max_length" maxLength="5"/>
<input class="form-control" type="text" name="range" range="[6,10]"/>
<input class="form-control" type="text" name="min" min="6"/>
<input class="form-control" type="text" name="max" max="6"/>
                            

Form Wizard







Starts with http://

Between 5 and 10



This is supporting text for this field.

<div id="formwizard_simple" class="form-wizard form-wizard-horizontal">
	<form class="form floating-label">
		<div class="form-wizard-nav">
			<div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>
			<ul class="nav nav-justified nav-pills">
				<li class="active"><a href="#fws_tab1" data-toggle="tab"><span class="step">1</span> <span class="form-wizard-title">LOCATION</span></a></li>
				<li><a href="#fws_tab2" data-toggle="tab"><span class="step">2</span> <span class="form-wizard-title">ADDRESS</span></a></li>
				<li><a href="#fws_tab3" data-toggle="tab"><span class="step">3</span> <span class="form-wizard-title">SETTINGS</span></a></li>
				<li><a href="#fws_tab4" data-toggle="tab"><span class="step">4</span> <span class="form-wizard-title">CONFIRM</span></a></li>
			</ul>
		</div><!--end .form-wizard-nav -->

		<div class="tab-content clearfix p-30">
			<div class="tab-pane active" id="fws_tab1">

			</div><!--end #tab1 -->

			<div class="tab-pane" id="fws_tab2">

			</div><!--end #tab2 -->

			<div class="tab-pane" id="fws_tab3">

			</div><!--end #tab3 -->

			<div class="tab-pane" id="fws_tab4">

			</div><!--end #tab4 -->

			<ul class="pager wizard ">
				<li class="previous first disabled"><a class="btn-raised" href="javascript:void(0);">First</a></li>
				<li class="previous disabled"><a class="btn-raised" href="javascript:void(0);">Previous</a></li>
				<li class="next last"><a class="btn-raised" href="javascript:void(0);">Last</a></li>
				<li class="next"><a class="btn-raised" href="javascript:void(0);">Next</a></li>
			</ul>
		</div><!--end .tab-content -->
	</form>
</div><!--end #rootwizard -->
                    				

Validation Form Wizard





Starts with http://

Between 5 and 10



This is supporting text for this field.

<div id="formwizard_validation" class="form-wizard form-wizard-horizontal">
	<form class="form floating-label form-validation" role="form" novalidate="novalidate">
		<div class="form-wizard-nav">
			<div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>
			<ul class="nav nav-justified nav-pills">
				<li class="active"><a href="#fwv_step1" data-toggle="tab"><span class="step">1</span> <span class="form-wizard-title">PERSONAL</span></a></li>
				<li><a href="#fwv_step2" data-toggle="tab"><span class="step">2</span> <span class="form-wizard-title">ACCOUNT</span></a></li>
				<li><a href="#fwv_step3" data-toggle="tab"><span class="step">3</span> <span class="form-wizard-title">SETTINGS</span></a></li>
				<li><a href="#fwv_step4" data-toggle="tab"><span class="step">4</span> <span class="form-wizard-title">CONFIRM</span></a></li>
			</ul>
		</div><!--end .form-wizard-nav -->
		<div class="tab-content clearfix p-30">
			<div class="tab-pane active" id="fwv_step1">

			</div><!--end #step1 -->
			<div class="tab-pane" id="fwv_step2">

			</div><!--end #step2 -->
			<div class="tab-pane" id="fwv_step3">

			</div><!--end #step3 -->
			<div class="tab-pane" id="fwv_step4">

			</div><!--end #step4 -->
			<ul class="pager wizard">
				<li class="previous first disabled"><a class="btn-raised" href="javascript:void(0);">First</a></li>
				<li class="previous disabled"><a class="btn-raised" href="javascript:void(0);">Previous</a></li>
				<li class="next last"><a class="btn-raised" href="javascript:void(0);">Last</a></li>
				<li class="next"><a class="btn-raised" href="javascript:void(0);">Next</a></li>
			</ul>
		</div><!--end .tab-content -->
	</form>
</div><!--end #rootwizard -->
                    				

Stacked Form


<form method="#" action="#">
	<div class="form-group label-floating">
		<label class="control-label">Email address</label>
		<input type="email" class="form-control">
	</div>
	<div class="form-group label-floating">
		<label class="control-label">Password</label>
		<input type="password" class="form-control">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox" name="optionsCheckboxes"> Subscribe to newsletter
		</label>
	</div>
	<button type="submit" class="btn btn-fill btn-default">Submit</button>
</form>

Horizontal Form


<form class="form-horizontal">
	<div class="row">
		<label class="col-md-3 label-on-left">Email</label>
		<div class="col-md-9">
			<div class="form-group label-floating is-empty">
				<label class="control-label"></label>
				<input type="email" class="form-control">
			</div>
		</div>
	</div>
	<div class="row">
		<label class="col-md-3 label-on-left">Password</label>
		<div class="col-md-9">
			<div class="form-group label-floating is-empty">
				<label class="control-label"></label>
				<input type="password" class="form-control">
			</div>
		</div>
	</div>
	<div class="row">
		<label class="col-md-3"></label>
		<div class="col-md-9">
			<div class="checkbox form-horizontal-checkbox">
				<label>
					<input type="checkbox" name="optionsCheckboxes"> Remember Me
				</label>
			</div>
		</div>
	</div>
	<div class="row">
		<label class="col-md-3"></label>
		<div class="col-md-9">
			<div class="form-group form-button">
				<button type="submit" class="btn btn-fill btn-default">Sign in</button>
			</div>
		</div>
	</div>
</form>

Tables

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu, chat menu and page content.

Tables Layouts & Structure

Table Layouts

This template use the default bootstrap table markup. You can read more about it here:http://getbootstrap.com/css/#tables.

Striped table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  <!-- TABLE CONTENT -->
</table>
Bordered table

Use .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered">
  <!-- TABLE CONTENT -->
</table>
Hover rows

Use .table-hover to enable a hover state on table.

<table class="table table-hover">
  <!-- TABLE CONTENT -->
</table>
Contextual classes

Use contextual classes to color table rows or individual cells.

<table class="table">
  <thead>
    <tr>...</tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>1</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">...</tr>
    <tr>...</tr>
    <tr class="danger">...</tr>
  </tbody>
</table>
DataTables Table plug-in for jQuery

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

include CSS and Javascript files
First of all add jquery.dataTables.min.css in the <head> of the document
<head>
	<link href="../../vendors/DataTables/jquery.dataTables.min.css" rel="stylesheet">
</head>
Then include jQuery and jquery.dataTables.min.js into your document.
<body>
	....
	<!-- jQuery -->
		<script src="../../vendors/jquery/dist/jquery.min.js"></script>

	<!-- DataTables.net plugins -->
		<script src="../../vendors/DataTables/jquery.dataTables.min.js"></script>
</body>
HTML

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

If you are generating your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else - all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the thead and tbody tags, as these aren't always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can actually generate the thead and tbody for you, along with all of the rows and cells of the table, if you are using Ajax sourced data, but for the moment we'll focus on a plain HTML. For more information about the different data sources DataTables can use, please see the data sources section

Javascript
$("#myTable").DataTable();

Credits

Amaze uses the following images and Javascript & CSS libraries:

Amaze/
	│
	└──vendors
		├──bootstrap/ (getbootstrap.com)
		├──bootstrap-notify/ (http://bootstrap-notify.remabledesigns.com/)
		├──bootstrap-wizard/ (http://github.com/VinceG/twitter-bootstrap-wizard)
		├──bootstrap-checkbox-radio-switch-tags.js
		├──charts
		│   ├──Flot/ (http://www.flotcharts.org/)
		│   ├──ChartJS/ (http://www.chartjs.org/)
		├──dropzone
		├──eonasdan-bootstrap-datetimepicker/ (http://eonasdan.github.io/bootstrap-datetimepicker/)
		├──fileinput/ (http://jasny.github.com/bootstrap/javascript/#fileinput)
		├──fullcalendar/ (http://fullcalendar.io)
		├──gallery
		├──input-mask/ (http://blog.igorescobar.com)
		├──jquery/ (jquery.com)
		├──jquery-ui
		├──jquery-ui-1.12.0
		├──jquery-ui-1.12.0.custom.zip
		├──jquery.validate.min.js
		├──jquery-jvectormap.js
		├──jquery.select-bootstrap.js
		├──jquery.datatables.js
		├──jasny-bootstrap.min.js
		├──jquery.tagsinput.js
		├──perfect-scrollbar.jquery.min.js
		├──material.min.js
		├──moment/ (http://momentjs.com/)
		├──nouislider/ (http://refreshless.com/nouislider/)
		└──sweetalert2

Images used in this template are taken from Pixabay