Overview | Material Dashboard Bootstrap @ Creative Tim

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="apple-touch-icon" sizes="76x76" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png"> <link rel="icon" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png" type="image/png"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="author" content="Creative Tim"> <title> Overview | Material Dashboard Bootstrap @ Creative Tim </title> <link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard" /> <meta name="keywords" content=""> <meta name="description" content="An user-friendly, open source and beautiful dashboard based on Bootstrap 5."> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Overview | Material Dashboard Bootstrap @ Creative Tim"> <meta name="twitter:description" content="An user-friendly, open source and beautiful dashboard based on Bootstrap 5."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/opt_sd_free_thumbnail.png"> <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Overview | Material Dashboard Bootstrap @ Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://demos.creative-tim.com/material-dashboard/index.html" /> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/opt_sd_free_thumbnail.png" /> <meta property="og:description" content="An user-friendly, open source and beautiful dashboard based on Bootstrap 5." /> <meta property="og:site_name" content="Creative Tim" /> <link href="" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" /> <link rel="stylesheet" href="https://demos.creative-tim.com/test/material-dashboard-pro/assets/css/material-dashboard.min.css" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"> <link href="https://demos.creative-tim.com/material-dashboard-pro/assets/css/material-dashboard.min.css?v=1.0.0" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,900" rel="stylesheet"> <link href="https://demos.creative-tim.com/argon-dashboard-pro/assets/css/nucleo-icons.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>  <style> .async-hide { opacity: 0 !important } </style> <script> (function(a, s, y, n, c, h, i, d, e) { s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function() { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function() { i(); h.end = null }, c); h.timeout = c; })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, { 'GTM-K9BGS8K': true }); </script>  <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46172202-22', 'auto', { allowLinker: true }); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com", "avangate.com"]); </script>   <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6'); </script>   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="../../assets/docs.css" rel="stylesheet" /> </head> <body class="docs ">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <header class="ct-docs-navbar"> <a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap"> <a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank"> Creative Tim </a> <div class="ct-docs-navbar-border"></div> <a href="../overview/material-dashboard" class="ct-docs-navbar-text"> Docs </a> </a> <ul class="ct-docs-navbar-nav-left"> <li class="ct-docs-nav-item-dropdown"> <a href="javascript:;" class="ct-docs-navbar-nav-link" role="button"> <span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span> </a> <div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview"> <a class="ct-docs-navbar-dropdown-item" href="https://demos.creative-tim.com/material-dashboard/examples/dashboard.html" target="_blank"> Material Dashboard </a> <a class="ct-docs-navbar-dropdown-item" href="https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics.html" target="_blank"> Material Dashboard Pro </a> </div> </li> <li class="ct-docs-nav-item-dropdown"> <a href="javascript:;" class="ct-docs-navbar-nav-link" role="button"> <span class="ct-docs-navbar-nav-link-inner--text">Support</span> </a> <div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport"> <a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard/issues" target="_blank"> Material Dashboard </a> <a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro/issues" target="_blank"> Material Dashboard Pro </a> </div> </li> </ul> <ul class="ct-docs-navbar-nav-right"> <li class="ct-docs-navbar-nav-item"> <a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">Download Free</a> </li> <li class="ct-docs-navbar-nav-item"> <a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/builder?ref=navbar-material-dashboard-docs" target="_blank">Online Builder</a> </li> </ul> <a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="ct-docs-btn-upgrade"> <span class="ct-docs-btn-inner--icon"> <i class="fas fa-download mr-2"></i> </span> <span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span> </a> <button class="ct-docs-navbar-toggler" type="button"> <span class="ct-docs-navbar-toggler-icon"></span> </button> </header> <div class="ct-docs-main-container"> <div class="ct-docs-main-content-row"> <div class="ct-docs-sidebar-col"> <nav class="ct-docs-sidebar-collapse-links"> <div class="ct-docs-sidebar-product"> <div class="ct-docs-sidebar-product-image"> <img src="../../assets/images/bootstrap.png"> </div> <p class="ct-docs-sidebar-product-text">Material Dashboard</p> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-active-40 text-white"></i> </div> </div> Getting started </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=" ct-docs-nav-sidenav-active "> <a href="../../bootstrap/overview/material-dashboard"> Overview </a> </li> <li class=""> <a href="../../bootstrap/license/material-dashboard"> License </a> </li> <li class=""> <a href="../../bootstrap/quick-start/material-dashboard"> Quick Start </a> </li> <li class=""> <a href="../../bootstrap/build-tools/material-dashboard"> Build Tools </a> </li> <li class=""> <a href="../../bootstrap/what-is-bootstrap/material-dashboard"> What is Bootstrap </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-ui-04 text-white"></i> </div> </div> Tutorials </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/ai-seo-agent/material-dashboard"> AI SEO Agent </a> </li> <li class=""> <a href="../../bootstrap/algolia/material-dashboard"> Algolia </a> </li> <li class=""> <a href="../../bootstrap/analytics/material-dashboard"> Analytics </a> </li> <li class=""> <a href="../../bootstrap/table-with-api-data/material-dashboard"> Table with API data </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-folder-17 text-white"></i> </div> </div> Foundation </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/colors/material-dashboard"> Colors </a> </li> <li class=""> <a href="../../bootstrap/grid/material-dashboard"> Grid </a> </li> <li class=""> <a href="../../bootstrap/typography/material-dashboard"> Typography </a> </li> <li class=""> <a href="../../bootstrap/icons/material-dashboard"> Icons </a> </li> <li class=""> <a href="../../bootstrap/utilities/material-dashboard"> Utilities </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-app text-white"></i> </div> </div> Components </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/alerts/material-dashboard"> Alerts </a> </li> <li class=""> <a href="../../bootstrap/badge/material-dashboard"> Badge </a> </li> <li class=""> <a href="../../bootstrap/buttons/material-dashboard"> Buttons </a> </li> <li class=""> <a href="../../bootstrap/social-buttons/material-dashboard"> Social Buttons <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/cards/material-dashboard"> Cards </a> </li> <li class=""> <a href="../../bootstrap/carousel/material-dashboard"> Carousel </a> </li> <li class=""> <a href="../../bootstrap/collapse/material-dashboard"> Collapse <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/dropdowns/material-dashboard"> Dropdowns </a> </li> <li class=""> <a href="../../bootstrap/forms/material-dashboard"> Forms </a> </li> <li class=""> <a href="../../bootstrap/input-group/material-dashboard"> Input Group </a> </li> <li class=""> <a href="../../bootstrap/list-group/material-dashboard"> List Group <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/modal/material-dashboard"> Modal </a> </li> <li class=""> <a href="../../bootstrap/navs/material-dashboard"> Navs </a> </li> <li class=""> <a href="../../bootstrap/navbar/material-dashboard"> Navbar </a> </li> <li class=""> <a href="../../bootstrap/pagination/material-dashboard"> Pagination </a> </li> <li class=""> <a href="../../bootstrap/popovers/material-dashboard"> Popovers </a> </li> <li class=""> <a href="../../bootstrap/progress/material-dashboard"> Progress </a> </li> <li class=""> <a href="../../bootstrap/spinners/material-dashboard"> Spinners <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/tables/material-dashboard"> Tables </a> </li> <li class=""> <a href="../../bootstrap/tooltips/material-dashboard"> Tooltips </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-settings text-white"></i> </div> </div> Plugins </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/countup-js/material-dashboard"> CountUp JS <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/charts/material-dashboard"> Charts </a> </li> <li class=""> <a href="../../bootstrap/datepicker/material-dashboard"> Datepicker <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/fullcalendar/material-dashboard"> Fullcalendar <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/sliders/material-dashboard"> Sliders <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/choices/material-dashboard"> Choices <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/dropzone/material-dashboard"> Dropzone <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/datatables/material-dashboard"> Datatables <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/kanban/material-dashboard"> Kanban <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/photo-swipe/material-dashboard"> Photo Swipe <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/quill/material-dashboard"> Quill <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/sweet-alerts/material-dashboard"> Sweet Alerts <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/wizard/material-dashboard"> Wizard <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> </ul> </div> </nav> </div> <div class="ct-docs-toc-col"> <ul class="section-nav"> <li class="toc-entry toc-h5"><a href="#developer-first">Developer First</a></li> <li class="toc-entry toc-h5"><a href="#high-quality">High quality</a></li> <li class="toc-entry toc-h5"><a href="#community-helpers">Community helpers</a></li> <li class="toc-entry toc-h5"><a href="#quick-start">Quick Start</a></li> <li class="toc-entry toc-h5"><a href="#components">Components</a></li> <li class="toc-entry toc-h5"><a href="#figma-design-files">Figma Design Files</a></li> <li class="toc-entry toc-h5"><a href="#upgrade-to-pro">Upgrade to Pro</a></li> <li class="toc-entry toc-h3"><a href="#resources-and-credits">Resources and credits</a></li> <li class="toc-entry toc-h3"><a href="#learn-more">Learn more</a></li> <li class="toc-entry toc-h3"><a href="#press-here-to-quick-start">Press here to Quick start</a></li> </ul> </div> <main class="ct-docs-content-col" role="main"> <div class="ct-docs-page-title"> <h1 class="ct-docs-page-h1-title" id="content"> Material Dashboard Bootstrap </h1> </div> <p class="ct-docs-page-title-lead">An user-friendly, open source and beautiful dashboard based on Bootstrap 5.</p> <hr class="ct-docs-hr"> <p>We at <a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> have always wanted to deliver great tools to all the web developers. We want to see better websites and web apps on the internet.</p> <p>You can try out our Material Dashboard Builder <a href="https://www.creative-tim.com/builder?ref=material-dashboard-docs" target="_blank">here</a>.</p> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="card bg-gradient-dark"> <div class="card-header bg-transparent mx-4 p-3 text-center"> <div class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto"> <i class="material-symbols-rounded opacity-10"> integration_instructions </i> </div> </div> <div class="card-body pt-0 p-3 text-center"> <h5 class="mb-2 text-white">Developer First</h5> <p class="mb-0 text-white"> Material Dashboard is a "Developer First" product, with a lot of variables for colors, fonts, sizes and other elements. </p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card bg-gradient-dark"> <div class="card-header bg-transparent mx-4 p-3 text-center"> <div class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto"> <i class="material-symbols-rounded opacity-10"> imagesearch_roller </i> </div> </div> <div class="card-body pt-0 p-3 text-center"> <h5 class="mb-2 text-white">High quality</h5> <p class="mb-0 text-white"> We are following the latest code standards provided by the guys from Bootstrap, so you will love working with this dashboard. </p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card bg-gradient-dark"> <div class="card-header bg-transparent mx-4 p-3 text-center"> <div class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto"> <i class="material-symbols-rounded opacity-10"> volunteer_activism </i> </div> </div> <div class="card-body pt-0 p-3 text-center"> <h5 class="mb-2 text-white">Community helpers</h5> <p class="mb-0 text-white"> Since all our products are built on top of Open Source also Material Dashboard is released under <a class="font-weight-bolder text-white" href="https://github.com/creativetimofficial/material-dashboard-2/blob/master/LICENSE.md" target="_blank" rel="nofollow">MIT License</a> </p> </div> </div> </div> </div> <div class="row mt-5"> <div class="col-md-6"> <a href="https://www.creative-tim.com/learning-lab/bootstrap/quick-start/material-dashboard" target="_blank"> <div class="card border mb-4"> <div class="card-body"> <h5 class="mb-2">Quick Start</h5> <p class="mb-0 text-body"> You must download or npm install and set up Material Dashboard 2 on your local computer before you can start your development journey with it. </p> </div> </div> </a> </div> <div class="col-md-6"> <a href="https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-dashboard" target="_blank"> <div class="card border mb-4"> <div class="card-body"> <h5 class="mb-2">Components</h5> <p class="mb-0 text-body"> Learn how to use the many Bootstrap elements, such as buttons, navbars, alerts, and dropdowns, to build your website. </p> </div> </div> </a> </div> <div class="col-md-6"> <a href="https://www.figma.com/community/file/1068529518839608496/Material-Dashboard-2---Free-Admin-Template" target="_blank"> <div class="card border mb-4"> <div class="card-body"> <h5 class="mb-2">Figma Design Files</h5> <p class="mb-0 text-body"> Create a prototype and a design for your website before you start developing it. You may effectively complete this operation with the use of the Figma file, which is constructed using the Material Dashboard. </p> </div> </div> </a> </div> <div class="col-md-6"> <a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank"> <div class="card border mb-4"> <div class="card-body"> <h5 class="mb-2">Upgrade to Pro</h5> <p class="mb-0 text-body"> By accessing a huge collection of materials, you may improve your designs and speed your development process with Material Dashboard 2 Pro, which provides a ton of extra pages and features. </p> </div> </div> </a> </div> </div> <h3 id="resources-and-credits">Resources and credits</h3> <p>This Dashboard is fully coded and built on top of Open Source, more details here:</p> <ul> <li><a href="https://www.getbootstrap.com" rel="nofollow" target="_blank">Bootstrap 5</a> - Open source front end framework</li> <li><a href="https://refreshless.com/nouislider/" rel="nofollow" target="_blank">noUISlider</a> - JavaScript Range Slider</li> <li><a href="https://popper.js.org/" rel="nofollow" target="_blank">Popper.js</a> - Kickass library used to manage poppers</li> <li><a href="https://flatpickr.js.org/" rel="nofollow" target="_blank">Flatpickr</a> - Useful library used to select date</li> <li><a href="https://joshuajohnson.co.uk/Choices/" rel="nofollow" target="_blank">Choices JS</a> - A nice plugin that select elements with intuitive multiselection and searching but also for managing tags.</li> <li><a href="https://inorganik.github.io/countUp.js/" rel="nofollow" target="_blank">CountUp JS</a> - A dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.</li> <li><a href="https://www.chartjs.org/" rel="nofollow" target="_blank">Charts Js</a> - Simple yet flexible JavaScript charting for designers & developers</li> <li><a href="https://fullcalendar.io/" rel="nofollow" target="_blank">FullCalendar</a> - Full-sized drag & drop event calendar</li> <li><a href="https://www.dropzonejs.com/" rel="nofollow" target="_blank">Dropzone</a> - An open source library that provides drag鈥檔鈥檇rop file uploads with image previews.</li> <li><a href="https://github.com/fiduswriter/Simple-DataTables" rel="nofollow" target="_blank">Datatables</a> - DataTables but in Vanilla ES2018 JS</li> <li><a href="http://www.riccardotartaglia.it/jkanban/" rel="nofollow" target="_blank">jKanban</a> - Pure agnostic Javascript plugin for Kanban boards</li> <li><a href="https://photoswipe.com/" rel="nofollow" target="_blank">PhotoSwipe</a> - JavaScript image gallery for mobile and desktop, modular, framework independent</li> <li><a href="https://quilljs.com/" rel="nofollow" target="_blank">Quill</a> - A free, open source WYSIWYG editor built for the modern web</li> <li><a href="https://sweetalert2.github.io/" rel="nofollow" target="_blank">Sweet Alerts</a> - A beautiful, responsive, customisable, accessible replacement for Javascript鈥檚 popup boxes.</li> <li><a href="https://threejs.org/" rel="nofollow" target="_blank">three.js</a> - JavaScript 3D library</li> <li><a href="https://www.cssscript.com/multi-step-form-bootstrap/" rel="nofollow" target="_blank">Wizard</a> - Animated Multi-step form for Bootstrap</li> </ul> <h3 id="learn-more">Learn more</h3> <p>Stay up to date on the development journey and connect with us on:</p> <ul> <li>Follow <a href="https://twitter.com/creativetim" rel="nofollow" target="_blank">Creative Tim on Twitter</a>.</li> <li>Read and subscribe to <a href="https://creative-tim.com/blog" rel="nofollow" target="_blank">The Official Creative Tim Blog</a>.</li> <li>Follow <a href="https://www.instagram.com/creativetimofficial" rel="nofollow" target="_blank">Creative Tim on Instagram</a>.</li> <li>Follow <a href="https://www.facebook.com/creativetim" rel="nofollow" target="_blank">Creative Tim on Facebook</a>.</li> </ul> <h3 id="press-here-to-quick-start"><a href="../quick-start/material-dashboard">Press here</a> to Quick start</h3> </main> </div> <div class="ct-docs-main-footer-row"> <div class="ct-docs-main-footer-blank-col"> </div> <div class="ct-docs-main-footer-col"> <footer class="ct-docs-footer"> <div class="ct-docs-footer-inner-row"> <div class="ct-docs-footer-col"> <div class="ct-docs-footer-copyright"> 漏 <script> document.write(new Date().getFullYear()) </script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> </div> </div> <div class="ct-docs-footer-col"> <ul class="ct-docs-footer-nav-footer"> <li> <a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a> </li> <li> <a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a> </li> <li> <a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a> </li> </ul> </div> </div> </footer> </div> </div> </div> <script src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/core/popper.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/core/bootstrap.min.js" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/vendor/prismjs/prism.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-design-system-pro/assets/demo/docs.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-design-system-pro/assets/demo/vendor/holder.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/plugins/moment.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/material-dashboard-pro/assets/js/material-dashboard.min.js?v=3.1.0" type="text/javascript"></script> <script> Holder.addTheme('gray', { bg: '#777', fg: 'rgba(255,255,255,.75)', font: 'Helvetica', fontweight: 'normal' }) </script>  <script> ! function(f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function() { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', '//connect.facebook.net/en_US/fbevents.js'); try { fbq('init', '111649226022273'); fbq('track', "PageView"); } catch (err) { console.log('Facebook Track Error:', err); } </script> <script src="../../assets/docs.js"></script> </body> </html>

CINXE.COM

Overview | Material Dashboard Bootstrap @ Creative Tim