Material Design for Bootstrap
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
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.
Desktop browsers
Similarly, the latest versions of most desktop browsers are supported.
![]() Chrome |
![]() Firefox |
![]() Internet Explorer |
![]() Edge |
![]() Opera |
![]() 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
4.5.1 is broken (color maps)
Expected behavior
Completed compiling (like on 4.5.0)
Actual behavior
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
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
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.
Waves creates i from input.btn
MDB Waves transfers HTML code
into
This is wrong, the i tag should not exists.
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...
the issue is solved by
the git repository should be removed from the package.
mdbootstrap v4.7.4 used in electron OS: both Windows 7 and Ubuntu
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.
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
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
to
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
$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.
TypeError: $(...).material_select is not a function
My Html Is
Scripts Inside the body
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?)
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 ofdata-mdb-toggle="dropdown"
.Is it a bug?
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/
$enable-responsive-font-sizes
variable must be set totrue
in order to make it work (the default value isfalse
)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
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.)
For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum
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:
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
Resources (screenshots, code snippets etc.)
A live example here: https://jsfiddle.net/pwjfx8v6/
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