To start using this dashboard you will need to import some files in
your current project or start from scratch using our template
(scroll down in this page to view it).
Skip the download with
to deliver cached version of Bootstrap’s compiled CSS and JS to your
Copy-paste the stylesheet
before all other stylesheets to load our CSS.
<script>s near the end of your pages, right before the closing
Need to use a certain plugin in your page? You can find out how to
integrate them and make them work in the Plugins dedicated page. In
this way you will be sure that your website is optimized and uses
only the needed resources.
Material Dashboard PRO comes in 2 modes: dark & light. To turn
on the dark version you need to add
class on the body tag.
Bootstrap starter template
Be sure to have your pages set up with the latest design and
development standards. That means using an HTML5 doctype and
including a viewport meta tag for proper responsive behaviors. Put
it all together and your pages should look like this:
Material Dashboard employs a handful of important global styles and
settings that you’ll need to be aware of when using it, all of which
are almost exclusively geared towards the normalization of
cross browser styles. Let’s dive in.
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll
see some funky incomplete styling, but including it shouldn’t cause
any considerable hiccups.
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we
optimize code for mobile devices first and then scale up components
as necessary using CSS media queries. To ensure proper rendering and
touch zooming for all devices,
add the responsive viewport meta tag to your
Many of Bootstrap’s components and utilities are built with
loops that iterate over a Sass map. This is especially helpful for
generating variants of a component by our
and creating responsive variants for each breakpoint. As you
customize these Sass maps and recompile, you’ll automatically see
your changes reflected in these loops.