Material Dashboard - Open Source Bootstrap 5 Material Design Admin

  • By Creative Tim
  • Last update: Jan 7, 2023
  • Comments: 16

Material Dashboard 2 Tweet

version GitHub issues open GitHub issues closed

Image

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.

Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

This product came as a result of users asking for a material dashboard after we released our successful Material Kit. We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.

Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

Special thanks go to:

  • Robert McIntosh for the notification system.
  • Chartist for the wonderful charts. We are very excited to share this dashboard with you and we look forward to hearing your feedback!

Table of Contents

Versions

BS5 BS4 Dark BS4 React Vue Angular
Material Dashboard  HTML Material Dashboard  HTML Material Dashboard Dark Edition Material Dashboard  React Vue Material Dashboard Material Dashboard  Angular
Vuetify React Native Nextjs Nodejs
Material Dashboard  Vuetify React Native Nextjs Material Dashboard Material Dashboard React Nodejs
Laravel Asp.NET Django Flask
Material Dashboard Laravel Asp.NET Material Dashboard Django Material Dashboard Flask

Demo

View More.

Quick start

Documentation

The documentation for the Material Dashboard is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

material-dashboard
    ├── assets
    │   ├── css
    │   ├── fonts
    │   ├── img
    │   ├── js
    │   │   ├── core
    │   │   ├── plugins
    │   │   └── material-dashboard.js
    │   │   └── material-dashboard.js.map
    │   │   └── material-dashboard.min.js
    │   └── scss
    │       ├── material-dashboard
    │       └── material-dashboard.scss
    ├── docs
    │   ├── documentation.html
    ├── pages
    ├── CHANGELOG.md
    ├── gulpfile.js
    ├── package.json

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Dashboard. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Material Dashboard. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Upgrade to Premium version

Are you looking for more components? Please check our Premium Version of Material Dashboard here

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Github

https://github.com/creativetimofficial/material-dashboard

Comments(16)

  • 1

    chars does not show up with multiple tabs

    I am using material tabs as page subcategories in which there are multiple chartist charts. The problem is that chars does not show up except for first active tab. It seems that width comes as 0.

  • 2

    [Bug] CSS style problem in Safari 15.1 (macOS)

    Version

    v3.0.0 (according to the page source of demo dashboard page)

    Reproduction link

    https://demos.creative-tim.com/material-dashboard/pages/dashboard.html

    Operating System

    macOS 10.15.7

    Device

    iMac 21" (late 2013 model)

    Browser & Version

    Safari 15.1

    Steps to reproduce

    1. Open the Creative Tim's Material Dashboard demo link (https://demos.creative-tim.com/material-dashboard/pages/dashboard.html)
    2. Notice the lower-left corner "Upgrade to Pro" button. In Safari, it is a grey rectangle (in other browsers like Chrome, it's a pink button)
    3. The style of Drop Down box (<select class="form-control">) is also different. In Safari, the down arrow is missing.

    What is expected?

    Expected that the visual styles of the Material Dashboard are identical across different browsers.

    What is actually happening?

    Safari does not show the correct styles.


    Solution

    As a workaround, set the following CSS:

    .btn-primary, .btn.bg-gradient-primary {
        -webkit-appearance: none;
    }
    

    Additional comments

    Screenshots: https://imgur.com/a/ut6vT5s

  • 3

    SASS Error. Failed to Compile!

    Prerequisites

    Please answer the following questions for yourself before submitting an issue.

    • [x] I am running the latest version
    • [x] I checked the documentation and found no answer
    • [x] I checked to make sure that this issue has not already been filed
    • [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

    Expected Behavior

    I´m looking for the first render but i can´t.

    Current Behavior

    Failed to Compile. ./src/assets/scss/argon-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/scss/argon-dashboard-react.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:

    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getDefaultSassImplementation.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getSassImplementation.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\index.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\cjs.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\loadLoader.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\LoaderRunner.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModule.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModuleFactory.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\Compiler.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\webpack.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\react-scripts\scripts\start.js
  • 4

    Navbar submenu does not work

    Prerequisites

    Please answer the following questions for yourself before submitting an issue.

    • [ *] I am running the latest version
    • [* ] I checked the documentation and found no answer
    • [* ] I checked to make sure that this issue has not already been filed
    • [ *] I'm reporting the issue to the correct repository (for multi-repository projects)

    Expected Behavior

    Want to have a multi level drop down in the nabar.

    Current Behavior

    I have used the class submenu as mentioned in bootstrap 4 documentation. But no luck!

  • 5

    Material-dashboard and Asp.Net MVC 5 in one application

    Hi, i try to run this material-dashboard angular app in Asp.Net MVC 5 and i have error:

    core.es5.js:1020 ERROR ReferenceError: $ is not defined at HomeComponent.Array.concat.HomeComponent.ngOnInit (home.component.ts:19) at checkAndUpdateDirectiveInline (core.es5.js:10843) at checkAndUpdateNodeInline (core.es5.js:12341) at checkAndUpdateNode (core.es5.js:12284) at prodCheckAndUpdateNode (core.es5.js:12974) at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js:9) at Object.updateDirectives (core.es5.js:12718) at checkAndUpdateView (core.es5.js:12251) at callViewAction (core.es5.js:12599) at execEmbeddedViewsAction (core.es5.js:12557)

    home.components.ts (19 line): ngOnInit() { $.getScript('../../../assets/js/material-dashboard.js'); $.getScript('../../../assets/js/initMenu.js'); }

    If i run this app with 'ng serve' (without mvc app), it builds the application and starts a web server and everythink is ok.

    But if i try to do it following steps: 1.)ng build 2.)move directory 'dist' to my mvc app (target operation of copy : MyMvcWeb\Scripts\NgApp )

    My view in mvc app:

    @{ Layout = null; }

    Test app Loading..

    Anyone knows what is wrong, what i have to do more or what is the problem?

  • 6

    Sidebar wrapper height calculation breaks when adding a taller logo

    If you add an image, or create a multi line text... Any element which height is bigger than the actual "CREATIVE TIM" text, the wrapper is adding additional space towards the bottom of the page and sidebar "floats"...

    ~I fixed it by switching to height: auto or directly removing that line:~ (nvm, it doesnt fix the problem, because you can't scroll down on smaller screens, probably the best way is to set overflow-y:hidden for body .wrapper) https://github.com/creativetimofficial/material-dashboard/blob/master/assets/css/material-dashboard.css#L445

  • 7

    Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function

    Prerequisites

    Please answer the following questions for yourself before submitting an issue.

    • [x ] I am running the latest version
    • [x ] I checked the documentation and found no answer
    • [x ] I checked to make sure that this issue has not already been filed
    • [ x] I'm reporting the issue to the correct repository (for multi-repository projects)

    Expected Behavior

    Please describe the behavior you are expecting I would like to use the Material Dashboard (Design) for Laravel and the Editor (Datatables.net).

    Current Behavior

    What is the current behavior?

    Failure Information (for bugs)

    I can only use the the function from the sidebar OR the Editor (from datatables.net) Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

    Steps to Reproduce

    Please provide detailed steps for reproducing the issue.

    1. step 1
    2. step 2
    3. you get it...

    Context

    Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

    • Device:
    • Operating System:
    • Browser and Version:

    Failure Logs

    Please include any relevant log snippets or files here. To use the Editor (datatables.net) in my material-Dashboard for laravel project, I need to create and use an app.js/bootrap.js. My app.blade.php looks like this:

    Material Dashboard PRO Laravel by Creative Tim @if (auth()->check() && !in_array(request()->route()->getName(), ['welcome', 'page.pricing', 'page.lock', 'page.error'])) @include('layouts.page_templates.auth') @else @include('layouts.page_templates.guest') @endif
    @stack('scripts') @stack('js')

    My app.js looks like this: require('./bootstrap');

    And my bootsrap.js looks like this: window._ = require('lodash');

    /**

    • We'll load jQuery and the Bootstrap jQuery plugin which provides support
    • for JavaScript based Bootstrap features such as modals and tabs. This
    • code may be modified to fit the specific needs of your application. */

    try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('datatables.net-bs4');
    require('datatables.net-buttons-bs4');
    require('datatables.net-select-bs4');
    require('datatables.net-editor-bs4');
    

    } catch (e) {}

    /**

    • We'll load the axios HTTP library which allows us to easily issue requests
    • to our Laravel back-end. This library automatically handles sending the
    • CSRF token as a header based on the value of the "XSRF" token cookie. */

    window.axios = require('axios');

    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

    /**

    • Echo exposes an expressive API for subscribing to channels and listening
    • for events that are broadcast by Laravel. Echo and event broadcasting
    • allows your team to easily build robust real-time web applications. */

    // import Echo from 'laravel-echo';

    // window.Pusher = require('pusher-js');

    // window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // encrypted: true // });

  • 8

    npm install WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

    Prerequisites

    Please answer the following questions for yourself before submitting an issue.

    • [ Yes, Material Dashboard Pro - v2.1.0 ] I am running the latest version
    • [ No ] I checked the documentation and found no answer
    • [ Yes ] I checked to make sure that this issue has not already been filed
    • [ Yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

    Expected Behavior

    Please describe the behavior you are expecting On npm install, I'm expecting no warnings for deprecated: npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 Please provide instructions to upgrade

    Current Behavior

    What is the current behavior? npm WARN deprecated [email protected]

  • 9

    Suggestion

    I think the way the brand-primary color is being implemented right now can be somewhat misleading, as it's based on the components having the data-color set to purple. So, changing the primary color to light-blue and having the data-color set to purple... I suggest setting a the data-color across the project pointing to something like: 'primary' so it can be easier to understand.

    Also, this is about the angular material dashboard, all the data-colors for the primary color has been set to "red" so, changing the variable in line 28 of _colors has no effect.

  • 10

    Include data validation and text editor plugins

    Hi,

    I would like us to include data validation and text editor plugins. They are a must have on the admin dashboard panels.

    I would like if we could edit the summernote js plugin fetched from https://summernote.org css and js code to fit in with material design principles. And also edit the jquery validation plugin js fetched from https://jqueryvalidation.org as suggestions.

    Please, I have used your material dashboard plugin to develop an admin panel for one of my clients and they like it. But now these two plugins are required and I don't know where to start or to go about it.

    Any advice will be much appreciated.

  • 11

    Checkbox

    Hi! I have an issue with a checkbox. It works only twice. 8a43ea8b20981bdea67c51b82d098e4d On the gif you can see that I click and then do it again. Checkbox changes it's state. And when I click on it again, it does not change the state. The head content is following:

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Edit</title>
        <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.9.0.js"></script>
    
        <script src="/Scripts/moment.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    
        <script src="/Scripts/bootstrap-datetimepicker.js"></script>
    
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
    
        <link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet"/>
    
        <script src="/Scripts/bootstrap-select.js"></script>
    
        <script src="/Scripts/material-dashboard/material.min.js"></script>
    <script src="/Scripts/material-dashboard/bootstrap-notify.js"></script>
    <script src="/Scripts/material-dashboard/bootstrap-checkbox-radio.js"></script>
    <script src="/Scripts/material-dashboard/material-dashboard.js"></script>
    
        <script src="/Scripts/modernizr-2.6.2.js"></script>
    
        <link href="/Content/Site.css" rel="stylesheet"/>
    
        
        <script src="/Scripts/cvpr/FileUploadHelper.js"></script>
    <script src="/Scripts/cvpr/GeneralSettings.js"></script>
    <script src="/Scripts/cvpr/Sessions.js"></script>
    <script src="/Scripts/cvpr/Speakers.js"></script>
    
        <link href="/Content/bootstrap-select.css" rel="stylesheet"/>
    
        <link href="/Content/material-dashboard/material-dashboard.css" rel="stylesheet"/>
    
        
        <!--Icons, list is here: http://materializecss.com/icons.html -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    

    I work with ASP.NET, so this is the way I use a checkbox:

    <div class="form-group">
                <div class="checkbox col-md-offset-2 col-lg-offset-2">
                    <label class="control-label">
                        @Html.CheckBoxFor(model => model.IsHidden) Is Hidden
                    </label>
                    @Html.ValidationMessageFor(model => model.IsHidden, "", new { @class = "text-danger" })
                </div>
            </div>
    

    Please, help me to fix the issue.

  • 12

    [Feature Request] Documentation Datatable AJAX/fetch Request

    What is your enhancement?

    hello,

    I've suscribe Pro subcription, and I've problem for use simpledatatable with Ajax and Fetch request in Jquery. Can you help me ?

  • 13

    [Bug] Template does not work

    Version

    2.12

    Reproduction link

    https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html

    Operating System

    Mac

    Device

    Mac

    Browser & Version

    Chrome

    Steps to reproduce

    1: Download code from Github 2: Try to run minimal Flask app serving "basic template" 3: It does not work because the

    What is expected?

    The page is styled.

    What is actually happening?

    The page is completely unstyled. No CSS whatsoever.


    Solution

    Buy a different template

    Additional comments

  • 14

    [Bug] TypeError: Cannot convert object to primitive value

    Version

    v2.1.0

    Reproduction link

    https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589

    Operating System

    Ubuntu

    Device

    PC and Mobile

    Browser & Version

    All Browsers

    Steps to reproduce

    1. Create a site using material design
    2. Try to add JS9: https://js9.si.edu/
    3. add static files. refer to js9support.min.js as example shows.

    What is expected?

    When navbar-toggler width data-target of #navigation-example is clicked an animation to open a side bar is expected.

    What is actually happening?

    An error says TypeError: Cannot convert object to primitive value and no side bar is opened


    Solution

    https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589

    chanhed this line: if (!i && l.toggle && /show|hide/.test(t) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {

    to this: if (!i && l.toggle && /show|hide/.test(l) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {

    Additional comments

    Unfortunately my code is not in production. So I cannot create a codepen etc...

  • 15

    [Bug] referenceButtons creates errors when undefined

    Version

    BS5

    Reproduction link

    https://github.com/Seneca-CDOT/telescope/issues/2691

    Operating System

    Windows/OS

    Device

    PC

    Browser & Version

    Chrome Version 97.0.4692.99

    Steps to reproduce

    ReferenceButtons is not always defined, See https://github.com/creativetimofficial/material-dashboard/blob/66716686d10a8f1ed754f93bb52b3a922db1ffcf/assets/js/material-dashboard.js#L626.

    We should protect this.

    What is expected?

    There should not be any errors in console due to undefined variables.

    What is actually happening?

    Error in console: Uncaught TypeError: Cannot read properties of null (reading 'classList') at 'navbarColorOnResize.


    Solution

    use optional chaining as below: if (referenceButtons?.classList.contains('active') && referenceButtons?.getAttribute('data-class') === 'bg-transparent') {

    Additional comments

    I'd be happy to contribute the fix for this.

  • 16

    [Bug] not working with node 16

    Version

    master

    Reproduction link

    https://gitlab.com/ldath-core/examples/ex-material-dashboard/-/pipelines/430662461

    Operating System

    linux

    Device

    docker

    Browser & Version

    terminal

    Steps to reproduce

    npm install when having installed node 16

    What is expected?

    installing packages from package.json

    What is actually happening?

    npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1 npm ERR! gyp ERR! build error npm ERR! gyp ERR! stack Error: make failed with exit code: 2 npm ERR! gyp ERR! stack at ChildProcess.onExit (/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/lib/build.js:262:23) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) npm ERR! gyp ERR! System Linux 5.4.109+ npm ERR! gyp ERR! command "/usr/local/bin/node" "/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd /builds/ldath-core/examples/ex-material-dashboard/node_modules/node-sass npm ERR! gyp ERR! node -v v16.13.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-12-16T01_47_13_377Z-debug.log


    Solution

    looks like to old version of node-sass is used by gyp

    Additional comments