--- name: material-design-for-bootstrap summary: "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." language: JavaScript license: MIT repo: https://github.com/mdbootstrap/material-design-for-bootstrap source: https://opensources.dev/resource/material-design-for-bootstrap health: 85 --- # 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. 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](https://mdbootstrap.com/docs/standard/) --- # Get started ### [>> Get Started in 1 minute](https://mdbootstrap.com/docs/standard/getting-started/installation/) Simple installation via .zip, npm or cdnjs. ### [>> Install with MDBGO](https://mdbgo.com/) 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](https://mdbgo.com/wordpress-shop/) 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**](https://mdbootstrap.com/docs/standard/bootstrap-5/) [**>> Bootstrap 5 Tutorial**](https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/) [**>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials**](https://www.youtube.com/c/Mdbootstrap?sub_confirmation=1) # 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](https://mdbootstrap.com/support/) 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**](https://github.com/mdbootstrap/bootstrap-material-design/blob/master/CONTRIBUTING.md)** 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­­ ­­­ ­­­ ­­­ ­­­ ­­­ [![MDB Angular](https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png)](https://mdbootstrap.com/docs/angular/)­­ ­­­ ­­­­ ­­­ ­­­ [![MDB React](https://mdbootstrap.com/img/Marketing/general/logo/small/react.png)](https://mdbootstrap.com/docs/react/)­­ ­ ­­­ ­­­ [![MDB Vue](https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png)](https://mdbootstrap.com/docs/vue/)­­ ­­­­ [![MDB 5](https://mdbootstrap.com/wp-content/uploads/2020/08/bootstrap5-logo.png)](https://mdbootstrap.com/docs/standard/) # Quick Start Video According to your preference, you can follow a [video](https://youtu.be/cXTThxoywNQ) or [written version](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/) Also, you can install MDB Free using NPM [installation guide](https://mdbootstrap.com/docs/standard/getting-started/installation/) # 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. [](http://godban.github.io/browsers-support-badges/)Chrome[](http://godban.github.io/browsers-support-badges/)Firefox[](http://godban.github.io/browsers-support-badges/)SafariAndroid Browser & WebView[](http://godban.github.io/browsers-support-badges/) 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. [](http://godban.github.io/browsers-support-badges/)Chrome[](http://godban.github.io/browsers-support-badges/)Firefox[](http://godban.github.io/browsers-support-badges/) Internet Explorer[](http://godban.github.io/browsers-support-badges/) Edge[](http://godban.github.io/browsers-support-badges/)Opera[](http://godban.github.io/browsers-support-badges/)Safari⠀⠀⠀Mac⠀⠀SupportedSupportedN/AN/A⠀Supported⠀⠀Supported⠀⠀⠀⠀⠀Windows⠀SupportedSupportedN/A⠀Supported⠀⠀Supported⠀⠀Not supported⠀ ## Documentation You can explore [huge, detailed documentation](https://mdbootstrap.com/) 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](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/). ## Useful resources Here you'll find more useful resources, like [Getting Started](https://mdbootstrap.com/docs/standard/getting-started/installation/), [Freebies](https://mdbootstrap.com/freebies/), [Premium Templates](https://mdbootstrap.com/docs/standard/templates/admin-dashboard/) & [snippet editor](https://mdbootstrap.com/snippets/) ## Connect with us on [Twitter](https://twitter.com/MDBootstrap) | [Facebook](https://www.facebook.com/mdbootstrap) | [Pinterest](https://pl.pinterest.com/mdbootstrap) | [Dribbble](https://dribbble.com/mdbootstrap) | [LinkedIn](https://www.linkedin.com/company/material-design-for-bootstrap) | [YouTube](https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA) ## You enjoy using MDB? Check the advantages of the PRO version [Material Design for Bootstrap PRO](https://mdbootstrap.com/docs/standard/pro/) ### Support MDB developers - Star our GitHub repo - Create pull requests, submit bugs, suggest new features or documentation updates - Follow us on [Twitter](https://twitter.com/mdbootstrap) - Like our page on [Facebook](https://www.facebook.com/mdbootstrap) 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.