material-design-for-bootstrap
A UI kit that layers Google's Material Design styling on top of Bootstrap 4, providing a large library of pre-built components, animations, icons, and templates. This jQuery-based version is the legacy v4 release, with the project now steering users toward a Bootstrap 5 successor.
Embed badge
[](https://opensources.dev/resource/material-design-for-bootstrap)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install mdbootstrapOur analysis
Material Design for Bootstrap (MDB) is a UI kit that brings Google's Material Design look and feel to Bootstrap 4, bundling hundreds of styled components, plugins, animations, icons, and page templates. This repository is the jQuery/Bootstrap 4 edition.
When to use material-design-for-bootstrap
Good for teams already invested in Bootstrap who want a Material-styled visual layer without building components from scratch, or for quickly assembling responsive marketing sites and dashboards using vanilla HTML/CSS/jQuery rather than a JS component framework.
When not to
Skip it for new React/Vue/Angular apps where component-native libraries (MUI, Vuetify) or the framework-specific MDB editions integrate more cleanly, and avoid the v4 jQuery build for greenfield projects given the maintainers themselves recommend migrating to the Bootstrap 5 version.
Strengths
- Very large catalog of ready-made components, icons, animations, and templates
- MIT-licensed and free for personal and commercial use
- Familiar to Bootstrap users with simple zip/npm/cdn installation
- Available in multiple flavors (jQuery, React, Angular, Vue)
Trade-offs
- Built on Bootstrap 4 and jQuery, both now superseded; this repo is explicitly the legacy version
- Heavyweight footprint when only a few components are needed
- Documentation and marketing heavily funnel toward paid Pro tiers and the MDB GO hosting service
- jQuery dependency is a poor fit for modern component-based stacks
Maturity
Well-established and widely adopted (millions of users, ~9k stars), but this Bootstrap 4 edition is in maintenance/legacy status with active development shifted to the Bootstrap 5 product line. Support is largely steered through a vendor forum rather than GitHub issues.
Bootstrap 4 UI KIT - 700+ components, MIT license, simple installation.
MDB is a collection of free Bootstrap templates, themes, design tools & resources.
This content is for the previous 4th version of Bootstrap
Newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product
>> Get 700+ material UI components, free hosting, super simple 1 minute installation & much more
Get started
>> Get Started in 1 minute
Simple installation via .zip, npm or cdnjs.
>> Install with MDBGO
Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support.
>> Install with MDBGO + e-commerce shop integration
One click setup! MDB GO allows you to create a WordPress page with a single click. Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.
About Material Design for Bootstrap 4
Trusted by 2 000 000+ developers & designers. Used by companies & institutions like
Bootstrap 5 tutorial
>> Learn more about Bootstrap 5
>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials
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
MDBootstrap Angular⠀MDBootstrap ReactMDBootstrap Vue⠀MDBootstrap 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
Demo
Carousel
Loader / Spinner
Buttons
Cards
Alerts
Hamburger Menu
Footer
Sidenav
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.
ChromeFirefoxSafariAndroid Browser & WebView Miscrosoft Edge⠀Android⠀⠀Supported⠀⠀Supported⠀⠀N/A⠀Android v5.0+ supportedSupported⠀iOS⠀⠀Supported⠀⠀Supported⠀⠀SupportedN/ASupported⠀Windows 10 Mobile⠀⠀N/A⠀⠀N/A⠀⠀N/A⠀N/A⠀Supported
Desktop browsers
Similarly, the latest versions of most desktop browsers are supported.
ChromeFirefox Internet Explorer EdgeOperaSafari⠀⠀⠀Mac⠀⠀SupportedSupportedN/AN/A⠀Supported⠀⠀Supported⠀⠀⠀⠀⠀Windows⠀SupportedSupportedN/A⠀Supported⠀⠀Supported⠀⠀Not supported⠀
Documentation
You can explore huge, detailed documentation on our website.
Education
Additional tutorials for those with insatiable appetite for knowledge made by us & our users can be found in our education section.
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.
On this page
- This content is for the previous 4th version of Bootstrap
- Newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product
- Get started
- About Material Design for Bootstrap 4
- Bootstrap 5 tutorial
- Material Design for Bootstrap
- More Web Development Technologies
- Quick Start Video
- MDB CLI - the fastest way to create and host MDB projects
- Demo
- Carousel
- Loader / Spinner
- Buttons
- Cards
- Alerts
- Hamburger Menu
- Footer
- Sidenav
- Supported browsers
- Mobile devices
- Desktop browsers
- Documentation
- Education
- Useful resources
- Connect with us on
- You enjoy using MDB? Check the advantages of the PRO version
- Support MDB developers