Short Description and Usage

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Using it is very simple and it will enable you to refresh you classic looking application. To get the desired effect you will also need to integrate JS plugins that take a little bit more effort. It the end the result will be worth it.

Getting Started

The Material Dashboard is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.

The easiest way to start is to use our start-up template where all the files are already included and ready to use.

File Structure

Once you have downloaded the archive and opened it, you will find the following structure:

Let's take it one by one:

material-dashboard
--assets
---css
-----bootstrap.min.css
-----demo.css
-----material-dashboard.css
---img
---js
-----bootstrap-notify.js
-----bootstrap.min.js
-----chartist.min.js
-----demo.js
-----jquery-3.1.0.min.js
-----material-dashboard.js
-----material.min.js
----sass
-----md
-----material-dashboard.scss
--documentation
----tutorial-components.html
--examples

Restyled Components

Here is the list of Bootstrap 3 components that were restyled in Material Dashboard:

  • Buttons
  • Inputs
  • Textarea
  • Menu
  • Dropdown
  • Navigation Menu
  • Labels
  • Notifications
  • Typography
  • Tables

New Components

Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous.

Going through them, we added:

  • Checkboxes
  • Radio Buttons
  • Card Stats
  • Card Charts
  • Card with tabs
  • Material Icons

Components

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette.


<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
    			

Checkboxes

To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js

<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes">
		Unchecked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" checked>
		Checked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" disabled>
		Disabled Unchecked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" disabled checked>
		Disabled Checked
	</label>
</div>

				

Radio Buttons

To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios">
		Radio is off
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" checked="true">
		Radio is on
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadiosDisabled" disabled>
		Disabled Radio is off
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
		Disabled Radio is on
	</label>
</div>
    			

Inputs

We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.

group

<div class="col-sm-4">
	<div class="form-group">
    	<input type="text" value="" placeholder="Regular" class="form-control" />
	</div>
</div>

<div class="col-sm-4">
	<div class="form-group label-floating">
		<label class="control-label">With Floating Label</label>
		<input type="email" class="form-control">
	</div>
</div>

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

<div class="col-sm-4">
	<div class="form-group label-floating has-error">
		<label class="control-label">Error input</label>
		<input type="email" value="Error Input" class="form-control" />
		<span class="material-icons form-control-feedback">clear</span>
	</div>
</div>

<div class="col-sm-4">
	<div class="input-group">
		<span class="input-group-addon">
			<i class="material-icons">group</i>
		</span>
		<input type="text" class="form-control" placeholder="With Material Icons">
	</div>
</div>

<div class="col-sm-4">
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-group"></i>
		</span>
		<input type="text" class="form-control" placeholder="With Font Awesome Icons">
	</div>
</div>
				

Textarea

The textarea has a new style, so it looks similar to all other inputs.

<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
				

Tables

All Boostrap classes for tables are supported and improved.

Simple Table inside a card

Table Title

Here is a subtitle for this table

Name Country City Salary
Dakota Rice Niger Oud-Turnhout $36,738
Minerva Hooper Curaçao Sinaai-Waas $23,789
Sage Rodriguez Netherlands Baileux $56,142
Philip Chaney Korea, South Overland Park $38,735
Doris Greene Malawi Feldkirchen in Kärnten $63,542
Mason Porter Chile Gloucester $78,615

<div class="card">
	<div class="card-header" data-background-color="purple">
		<h4 class="title">Table Title</h4>
		<p class="category">Here is a subtitle for this table</p>
	</div>
	<div class="card-content table-responsive table-full-width">
		<table class="table">
			<thead class="text-danger">
				<th>Name</th>
				<th>Country</th>
				<th>City</th>
				<th>Salary</th>
			</thead>
			<tbody>
				<tr>
					<td>Dakota Rice</td>
					<td>Niger</td>
					<td>Oud-Turnhout</td>
					<td class="text-primary">$36,738</td>
				</tr>
				<tr>
					<td>Minerva Hooper</td>
					<td>Curaçao</td>
					<td>Sinaai-Waas</td>
					<td class="text-primary">$23,789</td>
				</tr>
				<tr>
					<td>Sage Rodriguez</td>
					<td>Netherlands</td>
					<td>Baileux</td>
					<td class="text-primary">$56,142</td>
				</tr>
				<tr>
					<td>Philip Chaney</td>
					<td>Korea, South</td>
					<td>Overland Park</td>
					<td class="text-primary">$38,735</td>
				</tr>
				<tr>
					<td>Doris Greene</td>
					<td>Malawi</td>
					<td>Feldkirchen in Kärnten</td>
					<td class="text-primary">$63,542</td>
				</tr>
				<tr>
					<td>Mason Porter</td>
					<td>Chile</td>
					<td>Gloucester</td>
					<td class="text-primary">$78,615</td>
				</tr>
			</tbody>
		</table>

	</div>
</div>
		    

Material Icons

Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google.

face

<i class="material-icons">face</i>
			

Notifications

The new notifications are looking fresh and clean. They go great with the navbar. For the following notification examples we used the .container-fluid class, so they will be fluid. Please use the class .container when you use them outside of the .wrapper so they will be aligned with the general page container.

info_outline
Info alert: You've got some friends nearby, stop looking at your phone and find them...
check
Success Alert: Yuhuuu! You've got your $11.99 album from The Weeknd
warning
Warning Alert: Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
error_outline
Error Alert: Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
<div class="alert alert-info">
<div class="container-fluid">
  <div class="alert-icon">
	<i class="material-icons">info_outline</i>
  </div>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"><i class="material-icons">clear</i></span>
  </button>
  <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
</div>
</div>

<div class="alert alert-success">
<div class="container-fluid">
  <div class="alert-icon">
	<i class="material-icons">check</i>
  </div>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"><i class="material-icons">clear</i></span>
  </button>
  <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
</div>
</div>

<div class="alert alert-warning">
<div class="container-fluid">
  <div class="alert-icon">
	<i class="material-icons">warning</i>
  </div>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"><i class="material-icons">clear</i></span>
  </button>
  <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
</div>
</div>

<div class="alert alert-danger">
<div class="container-fluid">
  <div class="alert-icon">
    <i class="material-icons">error_outline</i>
  </div>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"><i class="material-icons">clear</i></span>
  </button>
  <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
</div>
</div>
				

Cards

We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called .card. The information inside the card usually goes inside the content (class .card-content). The content can have three types of elements inside: .title and .category. You can optionally add a .card-footer, if you want to place a call-to-action.
You can change the color of the header using the data-background-color attribute like this: data-background-color="{ purple | blue | green | orange | red }".
If you want to use the cards on white background you can remove it's shadow using the class .card-plain

Card Chart

Daily Sales

55% increase in today sales.

<div class="col-md-6">
	<div class="card">
		<div class="card-header card-chart" data-background-color="orange">
			<div class="ct-chart" id="dailySalesChart"></div>
		</div>
		<div class="card-content">
			<h4 class="title">Daily Sales</h4>
			<p class="category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55%  </span> increase in today sales.</p>
		</div>
		<div class="card-footer">
			<div class="stats">
				<i class="material-icons">access_time</i> updated 4 minutes ago
			</div>
		</div>
	</div>
</div>

// INFO: #dailySalesChart is initialised inside demo.js on method initDocumentationCharts
                

Card Stats

content_copy

Used Space

49/50GB

store

Revenue

$34,245

<div class="card card-stats">
	<div class="card-header" data-background-color="orange">
		<i class="material-icons">content_copy</i>
	</div>
	<div class="card-content">
		<p class="category">Used Space</p>
		<h3 class="title">49/50<small>GB</small></h3>
	</div>
	<div class="card-footer">
		<div class="stats">
			<i class="material-icons text-danger">warning</i> <a href="#pablo">Get More Space...</a>
		</div>
	</div>
</div>
                

Card Nav-Tabs

First Tab
Second Tab
Third Tab
<div class="card card-nav-tabs">
	<div class="card-header" data-background-color="purple">
		<div class="nav-tabs-navigation">
			<div class="nav-tabs-wrapper">
				<span class="nav-tabs-title">Tasks:</span>
				<ul class="nav nav-tabs" data-tabs="tabs">
					<li class="active">
						<a href="#profile" data-toggle="tab">
							<i class="material-icons">bug_report</i>
							First
						<div class="ripple-container"></div></a>
					</li>
					<li class="">
						<a href="#messages" data-toggle="tab">
							<i class="material-icons">code</i>
							Second
						<div class="ripple-container"></div></a>
					</li>
					<li class="">
						<a href="#settings" data-toggle="tab">
							<i class="material-icons">cloud</i>
							Third
						<div class="ripple-container"></div></a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-content">
		<div class="tab-content">
			<div class="tab-pane active" id="profile">
				First Tab
			</div>
			<div class="tab-pane" id="messages">
				Second Tab
			</div>
			<div class="tab-pane" id="settings">
				Third Tab
			</div>
		</div>
	</div>

</div>

                

Changing Colors (SASS)

You can change the default colors via variables from SASS:

  1. You can find the colors in assets/sass/material-kit/_variables.scss starting with line 28 where is the primary color set: $brand-primary: $purple !default;. All the possible colors are in assets/sass/material-kit/_colors.scss
  2. Add the SASS folder from assets/sass/ the project inside Koala Compiler and find the file material-dashboard.scss, it will be the one in Green.
  3. Right click on that file and set the output path, it must be in assets/css/ so anything that you compile will overwrite the original material-dashboard.css
  4. Press on compile and everything will be done automatically