Tutorial and Components

Short Description

Material Dashboard PRO is a Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. It is based on the popular Bootstrap framework and comes packed with multiple third-party plugins. All components are built to fit perfectly with each other, while aligning to the material concepts.

Getting Started

The Material Dashboard Pro 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-datetimepicker.js
-----bootstrap-notify.js
-----bootstrap.min.js
-----chartist.min.js
-----demo.js
-----fullcalendar.min.js
-----jquery-3.1.1.min.js
-----jquery-jvectormap.js
-----jquery-ui.min.js
-----jquery.bootstrap-wizard.js
-----jquery.datatables.js
-----jquery.dropdown.js
-----jquery.tagsinput.js
-----jquery.validate.min.js
-----jquery.bootstrap--wizard.js
-----material-dashboard.js
-----material.min.js
-----moment.min.js
-----nouislider.min.js
-----sweetalert2.js
----sass
-----material-dashboard
-----material-dashboard.scss
--documentation
----tutorial-components.html
--examples

Restyled Components

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

• Buttons
• Inputs
• Textarea
• Menu
• Dropdown
• Navigation Menu
• Labels
• Notifications
• Typography
• Tables
• Collapse
• Dropdown
• Pagination
• Progress Bars
• Select
• Tables
• Textarea
• Tooltips
• Typography

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
• Toggle Buttons
• Card Stats
• Tags
• Card Charts
• Card with tabs
• Material Icons
• Google Maps
• jVector Maps
• jQuery Validations
• DataTables
• DateTimePicker
• Maps
• Panels
• Sliders
• Sweet Alert
• Switches
• Wizard

Components

Buttons

Colors

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

Default Primary Info Success Warning Danger Rose

<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>
<button class="btn btn-rose">Rose</button>
    			

Sizes

Buttons come in all needed sizes:

Large Normal Small Extra Small

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>
    			

Styles

We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or simple buttons. If you are using buttons that only have an icon inside of them, you can add .btn-just-icon so the icon properly aligns. Let's see some examples:

Default Round favorite With Icon favorite Simple

<button class="btn btn-primary ">Default</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-round">
	<i class="material-icons">favorite</i> With Icon
</button>
<button class="btn btn-primary btn-just-icon btn-round">
	<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-simple">Default</button>
    			

Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found here and Material Design Icons that can be found here.

Social

We have created special buttons for the main social networks. You can use the buttons with any styles, you just need to add the class .btn-[#social-network] for the button to have the brand colour of the network.

<button class="btn btn-fab btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button class="btn btn-twitter btn-just-icon">
    <i class="fa fa-twitter"></i>
</button>
<br />
<button class="btn btn-fab btn-facebook">
    <i class="fa fa-facebook"> </i>
</button>
<button class="btn btn-fab btn-google">
    <i class="fa fa-google"> </i>
</button>
<button class="btn btn-fab btn-linkedin">
    <i class="fa fa-linkedin"></i>
</button>
<button class="btn btn-fab btn-pinterest">
    <i class="fa fa-pinterest"></i>
</button>
<button class="btn btn-fab btn-youtube">
    <i class="fa fa-youtube"> </i>
</button>
<button class="btn btn-fab btn-tumblr">
    <i class="fa fa-tumblr"> </i>
</button>
<button class="btn btn-fab btn-github">
    <i class="fa fa-github"></i>
</button>
<button class="btn btn-fab btn-dribbble">
    <i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-fab btn-reddit">
    <i class="fa fa-reddit"></i>
</button>
<button class="btn btn-fab btn-instagram">
    <i class="fa fa-instagram"> </i>
</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>
    			

Toggle Buttons

If you want to use something more special than a checkbox, we recommend the toggle buttons.

<div class="togglebutton">
	<label>
    	<input type="checkbox" checked="">
		Toggle is on
	</label>
</div>

<div class="togglebutton">
	<label>
    	<input type="checkbox">
		Toggle is off
	</label>
</div>
    			

Dropdown

We are very proud to present the dropdown which has a subtle animation. IMPORTANT! The focus state is Purple by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar.

<div class="dropdown">
	<button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="true" >
    	Regular
    	<b class="caret"></b>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
		<li class="divider"></li>
		<li><a href="#">One more separated link</a></li>
	</ul>
</div>
    			

Dropup

We restyled the dropup and added a different animation for the opening. You can see the full implementation below.

<span class="dropup">
  <button href="#" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup <b class="caret"></b></button>
  <ul class="dropdown-menu dropdown-primary dropdown-menu-right">
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</span>
                

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.

<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>
				

Select Boostrap v1.11.2 - Live Demo

We have styled the select picker to look similar to the dropdown and the other inputs. To see the original documentation, please check out Silvio Moreto repo on GitHub.

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

Arrive.js v2.4.1

Arrive.js provides events to watch for DOM elements creation and removal. It makes use of Mutation Observers internally. To see the original documentation, please check out Arrive.js GitHub repo.

FileUpload Jasny v3.1.3 - Live Demo

We have styled the select picker to look similar to the dropdown and the other inputs. To see the original documentation, please check out repo on GitHub.

<div class="fileinput fileinput-new text-center" data-provides="fileinput">
    <div class="fileinput-new thumbnail">
        <img src="../../assets/img/image_placeholder.jpg" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail"></div>
    <div>
        <span class="btn btn-rose btn-round btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="..." />
        </span>
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
    </div>
</div>

<div class="fileinput fileinput-new text-center" data-provides="fileinput">
    <div class="fileinput-new thumbnail img-circle">
        <img src="../../assets/img/placeholder.jpg" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail img-circle"></div>
    <div>
        <span class="btn btn-round btn-rose btn-file">
            <span class="fileinput-new">Add Photo</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="..." /></span>
        <br />
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
    </div>
</div>
                

Navbar

The classic Bootstrap Navbar was restyled:

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    	<div class="navbar-header">
    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#">Brand</a>
    	</div>

    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    		<ul class="nav navbar-nav">
				<li class="active"><a href="#">Link</a></li>
        		<li><a href="#">Link</a></li>
        		<li class="dropdown">
        			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        			<ul class="dropdown-menu">
					  <li><a href="#">Action</a></li>
					  <li><a href="#">Another action</a></li>
					  <li><a href="#">Something else here</a></li>
					  <li class="divider"></li>
					  <li><a href="#">Separated link</a></li>
					  <li class="divider"></li>
				      <li><a href="#">One more separated link</a></li>
        			</ul>
        		</li>
    		</ul>
    	</div>
	</div>
</nav>
	    		

Besides the default navbar, we added 5 new colors: primary, blue, green, orange, red. If you want to use one of them, you have to replace the .navbar-default or .navbar-primary with the class for the chosen colour .navbar-info, .navbar-success, .navbar-warning or .navbar-danger.

Besides all this customisation, we have an extra navbar. .navbar-transparent is a special class that you can to use if you want the navbar to be transparent.

Nav Pills

We changed the design for the Bootstrap nav pills into something a bit more fresh. We have also added more colour classes for customisation like .nav-pills-primary, .nav-pills-info, .nav-pills-success, .nav-pills-warning, .nav-pills-danger.

Simple

We added coloured shadows to the pills and created two options: horizontal and vertical (using the class .nav-stacked).

With Icons

If you want to also add icons, you can use this version with the two options: horizontal and vertical. To use them, please add the .nav-pills-icons class.

<!-- simple and horizontal -->
<ul class="nav nav-pills nav-pills-info">
  <li class="active"><a href="#pill1" data-toggle="tab">Profile</a></li>
  <li><a href="#pill2" data-toggle="tab">Settings</a></li>
  <li><a href="#pill3" data-toggle="tab">Options</a></li>
</ul>

<!-- simple and vertical -->
<ul class="nav nav-pills nav-pills-info nav-stacked">
  <li class="active"><a href="#tab1" data-toggle="tab">Profile</a></li>
  <li><a href="#tab2" data-toggle="tab">Settings</a></li>
  <li><a href="#tab3" data-toggle="tab">Options</a></li>
</ul>

<!-- with icons and horizontal -->
<ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
	<li>
		<a href="#dashboard" role="tab" data-toggle="tab">
			<i class="material-icons">dashboard</i>
			Dashboard
		</a>
	</li>
	<li class="active">
		<a href="#schedule" role="tab" data-toggle="tab">
			<i class="material-icons">schedule</i>
			Schedule
		</a>
	</li>
	<li>
		<a href="#tasks" role="tab" data-toggle="tab">
			<i class="material-icons">list</i>
			Tasks
		</a>
	</li>
</ul>

<!-- with icons and vertical -->
<ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
	<li class="active">
		<a href="#dashboard-2" role="tab" data-toggle="tab">
			<i class="material-icons">dashboard</i>
			Dashboard
		</a>
	</li>
	<li >
        <a href="#schedule-2" role="tab" data-toggle="tab">
			<i class="material-icons">schedule</i>
			Schedule
        </a>
    </li>
</ul>
        		

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>
			

Tables

All Boostrap classes for tables are supported and improved.

Simple Table inside a card

<div class="card">
	<div class="card-header" data-background-color="purple">
		<h4 class="card-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>
		    

jQuery Tagsinput v0.8.0

The tags closely resemble the labels and follow the same line of colour. To use them, you need to use the default class .tagsinput, and add a variation of the data-color="{ primary | info | success | warning | danger | rose }".

For more information please check Full Github Documentation.

<input type="text" class="tagsinput" data-role="tagsinput" data-color="rose" value="Amsterdam,Washington,Sydney,Beijing" />
                

Bootstrap Notify v3.1.3 - Live Demo

The new Material Dashboard Pro notification are looking fresh and clean. They go great with the navbar.

If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below.

For more information please check Full Github Documentation.

Top Right Notification

<!-- button to trigger the action -->
<button class="btn btn-default" onclick="showNotification('top','right')">Top Right Notification</button>

<!-- javascript -->

function showNotification(from, align){

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

    },{
        type: 'success',
        timer: 4000,
        placement: {
            from: from,
            align: align
        }
    });
}
        

<div class="alert alert-info alert-with-icon">
    <i class="material-icons" data-notify="icon" >info_outline</i>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
    <span data-notify="message"> <b>Info Alert:</b> You've got some friends nearby, stop looking at your phone and find them... </span>
</div>

<div class="alert alert-success alert-with-icon">
    <i class="material-icons" data-notify="icon" >check</i>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
    <span data-notify="message"> <b>Success Alert:</b> You've got your $11.99 albul from The Weeknd </span>
</div>

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


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

Bootstrap DateTimePicker v4.17.37 - Live Demo

We have created the design of the date-time picker made by Eonasdan. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

For more information please check Full Github Documentation.

Here is a coded example:

<!-- input with datetimepicker -->
<div class="form-group">
    <label class="label-control">Datetime Picker</label>
    <input type="text" class="form-control datetimepicker" value="10/05/2016"/>
</div>

<!-- javascript for init -->
    $('.datetimepicker').datetimepicker({
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});
    

Sweet Alert 2 v5.3.5 - Live Demo

If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by Tristan Edwards.

For more information please check Full Github Documentation.

Try me!

    <button class="btn btn-primary btn-fill" onclick='swal({ title:"Good job!", text: "You clicked the button!", type: "success", buttonsStyling: false, confirmButtonClass: "btn btn-success"})'>Try me!</button>
    <!-- for more actions that you can use onclick, please check out assets/js/demo.js -->

jQuery Validation v1.14.0 - Live Demo

If you have required fields in forms, the best way to add validation for them is through the jQuery Validation tool. We have imported it into the Material Dashboard Pro library and changed its colors.

For more information please check Full Documentation. If you want to see a basic login example and the code behind it, check out the example below:

<!-- html for register -->
<div class="card">
    <form id="RegisterValidationDoc" action="" method="">
        <div class="card-header card-header-icon" data-background-color="blue">
            <i class="material-icons">mail_outline</i>
        </div>
        <div class="card-content">
            <h4 class="card-title">Register Forms</h4>
            <div class="form-group label-floating">
                <label class="control-label">
                    Email Address
                    <small>(required)</small>
                </label>
                <input class="form-control"
                       name="email"
                       type="email"
                       required="true"
                 />
            </div>

            <div class="form-group label-floating">
                <label class="control-label">
                    Password
                    <small>(required)</small>
                </label>
                <input class="form-control"
                       name="password"
                       id="registerPassword"
                       type="password"
                       required="true"
                 />
            </div>

            <div class="form-group label-floating">
                <label class="control-label">
                    Confirm Password
                    <small>(required)</small>
                </label>
                <input class="form-control"
                       name="password_confirmation"
                       id="registerPasswordConfirmation"
                       type="password"
                       required="true"
                       equalTo="#registerPassword"
                 />
            </div>


            <div class="category form-category"><small>(required)</small> - Required fields</div>

            <div class="form-footer text-right">
                <div class="checkbox pull-left">
                    <label>
                        <input type="checkbox" name="optionsCheckboxes">
                        Subscribe to newsletter
                    </label>
                </div>

                <button type="submit" class="btn btn-info btn-fill">Register</button>
            </div>
        </div>
    </form>
</div>

<!-- javascript for validation -->
function setFormValidation(id){
	$(id).validate({
		errorPlacement: function(error, element) {
            $(element).parent('div').addClass('has-error');
         }
	});
}

setFormValidation('#RegisterValidationDoc');

Perfect Scrollbar v0.6.13

"Minimalistic but perfect custom scrollbar plugin."

!IMPORTANT Perfect Scrollbar is applied on the .main-panel and .sidebar .sidebar-wrapper so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class .ps-child to any element that should have scroll. For more information please check Full Github Documentation.

<!-- javascript for activating the Perfect Scrollbar -->
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

<!-- javascript for detroying the Perfect Scrollbar -->
$('.main-panel').perfectScrollbar('destroy');

<!-- javascript for updating the Perfect Scrollbar when the content of the page is changing -->
$('.main-panel').perfectScrollbar('update');

RTL Support

You can have rtl support on your page by simple follow the steps:

1. You must add on the body tag the class .rtl-active
2. Now you have to add in the head the following tag under the tag link with bootstrap, like in the example below:

   // Bootstrap core CSS
   <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
   
   // RTL Support css
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet">
               

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: .card-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 | rose }".

If you want to use the cards on white background you can remove it's shadow using the class .card-plain

Cards Headers Type

The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: .card-header-icon or .card-header-text.

<div class="col-md-6">
  <div class="card">
      <div class="card-header">
          <h4 class="card-title">Regular header</h4>
          <p class="category">Category subtitle</p>
      </div>
      <div class="card-content">
            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
  </div>
</div>

<div class="col-md-6">
  <div class="card" data-background-color="red">>
      <div class="card-header">
          <h4 class="card-title">Full header coloured</h4>
          <p class="category">Category subtitle</p>
      </div>
      <div class="card-content">
            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
  </div>
</div>

<div class="col-md-6">
    <div class="card">
        <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">language</i>
        </div>
        <div class="card-content">
            <h4 class="card-title">Here is the Icon</h4>
                The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="card">
        <div class="card-header card-header-text" data-background-color="purple">
            <h4 class="card-title">Here is the Text</h4>
            <p class="category">Category subtitle</p>
        </div>
        <div class="card-content">
                The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
        </div>
    </div>
</div>
                

Cards with Animation

We've created some special cards that can have actions under the header, you can activate those cards but adding the property data-header-animation="true". Info: After 20x hovers of one of these cards you can break it :-)
To stop the break effect you can go to assets/js/material-dashboard.js and find the variable breakCards = true and set it to false.

<div class="card card-chart">
    <div class="card-header" data-background-color="rose" data-header-animation="true">
        <div class="ct-chart" id="websiteViewsChart"></div>
    </div>
    <div class="card-content">
        <div class="card-actions">
            <button type="button" class="btn btn-danger btn-simple fix-broken-card">
				<i class="material-icons">build</i> Fix Header!
			</button>

            <button type="button" class="btn btn-info btn-simple" rel="tooltip" data-placement="bottom" title="Refresh">
                <i class="material-icons">refresh</i>
            </button>
            <button type="button" class="btn btn-default btn-simple" rel="tooltip" data-placement="bottom" title="Change Date">
                <i class="material-icons">edit</i>
            </button>
        </div>
        ...
    </div>
    <div class="card-footer">
        ...
    </div>
</div>
                

Card Chart

<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="card-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 assets/js/demo.js on method initDocumentationCharts()
                

Card Stats

<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="card-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

<div class="card">
	<div class="card-header card-header-tabs" 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>

                

Card Pricing

<div class="col-md-3">
	<div class="card card-pricing card-plain">
		<div class="card-content">
			<h6 class="category">Freelancer</h6>
			<div class="icon">
				<i class="material-icons">weekend</i>
			</div>
			<h3 class="card-title">FREE</h3>
			<p class="card-description">
				This is good if your company size is between 2 and 10 Persons.
			</p>
			<a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
		</div>
	</div>
</div>

<div class="col-md-3">
	<div class="card card-pricing card-raised">
		<div class="card-content">
			<h6 class="category">Small Company</h6>
			<div class="icon icon-rose">
				<i class="material-icons">home</i>
			</div>
			<h3 class="card-title">$29</h3>
			<p class="card-description">
				This is good if your company size is between 2 and 10 Persons.
			</p>
			<a href="#pablo" class="btn btn-rose btn-round">Choose Plan</a>
		</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-dashboard/_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-dashboard/_colors.scss
2. Add the SASS folder from assets/sass/ to a new 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.