Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

  • By MDBootstrap
  • Last update: Jan 7, 2023
  • Comments: 16

Material Design for Bootstrap

Downloads License cdnjs npm

The most popular UI KIT for building responsive, mobile-first websites and apps - free for personal & commercial use. Available jQuery, Angular, React and Vue versions.

Trusted by 2 000 000+ developers & designers. Used by companies like

Our impressive collection of beautiful, 500+ material UI elements, 600+ material icons, 77+ CSS animations, 9+ useful plugins, SASS files, templates, tutorials and many more allows you to develop any kind of project.

We're maintaining a dedicated Support Forum for this purpose. This is also a go-to place for every suggestion, opinion, bug, and issue report if you'd like to receive help as soon as possible. Reports posted on Support Forum are prior to GitHub issues

Please read contribution rules before starting your improvements in order to help us make the cooperation and reviewing experience as pleasant and effective as possible

More Web Development Technologies

⠀ MDBootstrap Angular⠀ ⠀ MDBootstrap React ⠀­ ⠀ ­ MDBootstrap Vue⠀ ­ ­­ MDBootstrap 5 ­­
­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­­ MDB Angular ­­ ­­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB React ⠀­­ ­­­ ­­­ ­­­ ­­­ ­­­ ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB Vue ­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ ­­­ MDB 5 ⠀ ­­ ­­­ ­­­ ­­­ ­­­ ­­­

Quick Start Video

According to your preference, you can follow a video or written version

Also, you can install MDB Free using NPM installation guide

MDB CLI - the fastest way to create and host MDB projects

Initiate
With MDB CLI you can start a new project within seconds! Use mdb init command and start with a pre-set configuration!
Publish and host
Make your project visible with mdb publish, no need to store your code, simply get the link and share it with the world!
Get started

Demo

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Loader / Spinner

Buttons

You can use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more...

Cards

Bootstrap cards are components which display content built of different elements with characteristic shadows, depth and hover effects.

Alerts

Bootstrap alerts are feedback messages that are displayed after specific actions performed by the user. The length of the text is unlimited.

Hamburger Menu

Bootstrap alerts are feedback messages that are displayed after specific actions performed by the user. The length of the text is unlimited.

Footer

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Sidenav

Bootstrap's sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Supported browsers

MDBootstrap supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.

Mobile devices

Generally speaking, MDBootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Chrome
Chrome
Firefox
Firefox
Safari
Safari
Android Browser & WebView IE / Edge
Miscrosoft Edge
⠀Android⠀ ⠀Supported⠀ ⠀Supported⠀ ⠀N/A⠀ Android v5.0+ supported Supported
⠀iOS⠀ ⠀Supported⠀ ⠀Supported⠀ ⠀Supported N/A Supported
⠀Windows 10 Mobile⠀ ⠀N/A⠀ ⠀N/A⠀ ⠀N/A⠀ N/A⠀ Supported

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

Chrome
Chrome
Firefox
Firefox
IE / Edge
Internet Explorer
Internet Explorer / Edge
Edge
Opera
Opera
Safari
Safari
⠀⠀⠀Mac⠀⠀ Supported Supported N/A N/A ⠀Supported⠀ ⠀Supported⠀⠀
⠀⠀⠀Windows⠀ Supported Supported N/A ⠀Supported⠀ ⠀Supported⠀ ⠀Not supported⠀

Documentation

You can explore huge, detailed documentation on our website. You can also use sitemap where each component is located

Education

Additional tutorials for those with insatiable appetite for knowledge made by us & our users can be found in our education section & in miscellaneous

Useful resources

Here you'll find more useful resources, like Getting Started, Freebies, Premium Templates & snippet editor

Connect with us on

Twitter | Facebook | Pinterest | Dribbble | LinkedIn | YouTube

You enjoy using MDB? Check the advantages of the PRO version

Material Design for Bootstrap PRO

Support MDB developers

  • Star our GitHub repo
  • Create pull requests, submit bugs, suggest new features or documentation updates
  • Follow us on Twitter
  • Like our page on Facebook

A big ❤️ thank you to all our users ❤️ who are working with us to improve the software. We wouldn't be where we are without you.

Github

https://github.com/mdbootstrap/material-design-for-bootstrap

Comments(16)

  • 1

    4.5.1 is broken (color maps)

    Expected behavior

    Completed compiling (like on 4.5.0)

    Actual behavior

    Argument `$map2` of `map-merge($map1, $map2)` must be a map
    in [...]\node_modules\mdbootstrap\scss\core\_colors.scss (line 43, column 7)
    

    Because $red has been already set in bootstrap itself!

    Your working environment and MDB version information

    node v8.11.1, npm v5.6.0, yarn v1.5.1, bootstrap v4.1.0, mdbootstrap v4.5.1

    Resources (screenshots, code snippets etc.)

    scss file

    @import "~bootstrap/scss/bootstrap";
    @import "~mdbootstrap/scss/mdb";
    
  • 2

    Dropdown right does not work in navbar

    Because of this line in CSS: .navbar .dropdown-menu.dropdown-menu-right { right: auto !important; }

    dropdown menu is out of screen: http://i.imgur.com/NODgBc2.png

  • 3

    Allow to put mdb.js to header

    We have lot of inline javascripts generated via backend. If these scripts use mdb functions, they will crash, because mdb.js requires to include it at the end of HTML body.

    Only way I see to make this currently work is to wrap all of the inline scripts to some function, which sucks.

  • 4

    Waves creates i from input.btn

    MDB Waves transfers HTML code

    <input type="submit" class="btn btn-primary value="Submit">
    

    into

    <i class="btn btn-primary text-uppercase waves-input-wrapper waves-effect waves-light" style="color:rgb(255, 255, 255);background:rgba(0, 0, 0, 0)">
    <input type="submit" class="waves-button-input" value="Send" style="background-color:rgba(0,0,0,0);">
    </i>
    

    This is wrong, the i tag should not exists.

  • 5

    npm error EISGIT on npm install

    I use this module in my project and up until very recently it was working fine.

    Now it causes this error on npm install in my project...

    npm ERR! path /builds/aabuhijleh/electron_desktop/rb-services/node_modules/mdbootstrap
    npm ERR! code EISGIT
    npm ERR! git /builds/aabuhijleh/electron_desktop/rb-services/node_modules/mdbootstrap: Appears to be a git repo or submodule.
    npm ERR! git     /builds/aabuhijleh/electron_desktop/rb-services/node_modules/mdbootstrap
    npm ERR! git Refusing to remove it. Update manually,
    npm ERR! git or move it out of the way first.
    

    the issue is solved by

    rm -rf node_modules/mdbootstrap/.git/
    

    the git repository should be removed from the package.

    mdbootstrap v4.7.4 used in electron OS: both Windows 7 and Ubuntu

  • 6

    Equal Height Cards with Buttons always at the bottom?

    Hi,

    I have implemented the card deck styling on the following page – http://digitaltestsite2.biz/ Whats the simplest way of using css or js to ensure the buttons are always inline at the bottom of the cards?

    Thanks in advance.

  • 7

    Add TS declaration (type definition) file for using the library within a TypeScript project

    It would be very useful to have a TypeScript declaration file (called mdb.d.ts for example) that contains the signatures of the JavaScript methods in the library.

    Currently in order to integrate the library to a TypeScript project, the developer should create a patchy definition file - which should be maintained with every new version

  • 8

    Double Navigation with hidden SideNav & (non) fixed Navbar example doesn't work

    Both example of the double navigation with hidden sidenav doesn't work. The sidenav isn't hidden when loading the page.

    I can make it hide when I change the source code of

    <div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav" style="transform: translateX(0px);">
    

    to

    <div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav" style="transform: translateX(-100%);">
    

    https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-noFixed.html https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-fixed.html

  • 9

    $image-path not used in _masks.scss, breaks sass compile

    See the conversation on your forum, here.

    Trying to compile for sass generates the error:

    "Cannot find module “../img/..”"

    There already exists a $image-path that we should be able to use to provide the path.  It is already being used in _carousel-basic.  But it is not being used in _masks, hence the error.

    The current solution is absolutely not reasonable, expecting us to "customize" mdbootstrap by modifying files located in the node_modules folder.

    Using mdbootstrap v4.4.1.

  • 10

    TypeError: $(...).material_select is not a function

    My Html Is

    <div class="md-form">
    <i class="fa fa-bank prefix"></i>
    <select class="mdb-select" name="place"><option value="1">PLACE 1</option><option     value="2">PLACE 2</option></select>
    <label for="form3">Select Place</label>
    </div>
    

    Scripts Inside the body

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="http://127.0.0.1:8000/js/all.js"></script>
    <script>
    $(document).ready(function () {
    new WOW().init();
    $('.mdb-select').material_select();
    });
    
  • 11

    License?

    What license is this project under?

    I see both bower.json and package.json state this is MIT licensed, but license.pdf is something else.

    If it's MIT, you should include the MIT license text in a license.txt or similar.

    If not, you should probably povide an actual license legal text, the PDF is very ambiguous, which is quite worrying for many possible users of this project. (What does "Offer PSD/HTML to users of your service" mean, for example? If a user visits my website, my servers will send HTML to his browser... Is that against the license?)

  • 12

    Data-mdb-* don't work!!

    I jus cloned your repo https://github.com/mdbootstrap/material-design-for-bootstrap.git and put a navbar with a dropdown and noticed you need to use data-toggle="dropdown" instead of data-mdb-toggle="dropdown".

    Is it a bug?

  • 13

    The responsive-font-size mixin documentation

    Hello,

    I just thought it was useful to report this about the documentation at https://mdbootstrap.com/docs/b4/jquery/content/responsive-font-size/

    1. The PostCSS plugin link is broken
    2. You should add a warning to specify that the Bootstrap $enable-responsive-font-sizes variable must be set to true in order to make it work (the default value is false)
  • 14

    I bought the $99 package and cant access the premium multiselect

    Expected behavior

    https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example

    Actual behavior

    https://stackoverflow.com/questions/65238482/mdb-multiselect-not-displaying-properly

    Your working environment and MDB version information

    MDB: 4.19.2, windows 10, desktop, chrome

    Resources (screenshots, code snippets etc.)

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 15

    MDBSmoothScroll isn't exported from mdbreact

    Expected behavior

    MDBSmoothScroll will be exported and usable

    Actual behavior

    MDBSmoothScroll is not exported and unsable

    Your working environment and MDB version information

    latest

    Resources (screenshots, code snippets etc.)

    image

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 16

    Bug combining behaviours in drawers

    Thanks in advance for your time.

    Expected behavior

    If I specify a drawer with these classes:

    "bmd-layout-container bmd-drawer-f-r bmd-drawer-in-lg-up bmd-drawer-overlay-md-down"

    I expect it to behave like this:

    1. On <= md screens, drawer appears closed
    2. On <= md screens, when I open drawer, it overlays
    3. On >= lg screens, drawer appears opened, pushing content
    4. On >= lg screens, when I close drawer, it pushes back

    Actual behavior

    Cases 1, 2 and 3 work perfectly, but in >= lg screens the toggle button doesn't work.

    Your working environment and MDB version information

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ...></script>
        <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" ...></script>
        <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" ...></script>
    

    Resources (screenshots, code snippets etc.)

    A live example here: https://jsfiddle.net/pwjfx8v6/

    1. I just copied/pasted the starting template from here: https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/
    2. Then I copied/pasted the first drawer example from here: https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/material-design/drawers/#push
    3. Then I added these two classes to the bmd-layout-container tag: bmd-drawer-in-lg-up bmd-drawer-overlay-md-down

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum