mdbootstrap/material-design-for-bootstrap

★ 9,261JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((MDB Bootstrap 4))
    What it does
      700 plus UI components
      Material Design style
      Built on Bootstrap 4
    Frameworks
      Vanilla HTML
      Angular
      React
      Vue
    Setup
      npm install
      CDN link
      Zip download
    Extras
      MDBGO hosting
      Tutorial videos
      WordPress support

mindmap root((MDB Bootstrap 4)) What it does 700 plus UI components Material Design style Built on Bootstrap 4 Frameworks Vanilla HTML Angular React Vue Setup npm install CDN link Zip download Extras MDBGO hosting Tutorial videos WordPress support

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Drop 700+ pre-styled Material Design buttons, forms, modals, and navigation bars into any Bootstrap 4 HTML project.

USE CASE 2

Build a full website by pasting a CDN link into an HTML file and using MDB component markup directly.

USE CASE 3

Add Material Design components to an Angular, React, or Vue project using the matching MDB framework version.

Tech stack

JavaScriptCSSBootstrapAngularReactVue

Getting it running

Difficulty · easy Time to first run · 5min

Free to use in personal and commercial projects under the MIT license with no restrictions.

In plain English

Material Design for Bootstrap (MDB) is a UI kit that gives web developers a large library of ready-made visual components to use when building websites. Components are the individual building blocks of a website's interface: buttons, forms, navigation bars, cards, modals, and so on. This package offers over 700 of them, all styled to follow Google's Material Design guidelines and built on top of Bootstrap 4, a widely used CSS framework. Note that this particular repository is for the older Bootstrap 4 version. The README prominently points users toward the newer Bootstrap 5 version on the MDB website, and suggests migrating if possible. The kit is free to use under the MIT license, meaning you can use it in personal or commercial projects without paying. Installation is available through npm (a standard JavaScript package manager), a downloadable zip file, or a CDN link you paste into an HTML page. The README claims the basic setup takes about one minute. Versions are also available for Angular, React, and Vue, which are popular JavaScript frameworks for building web applications. The README does not go into technical details about which components differ between these framework versions. There is an associated hosting service called MDBGO that the README promotes alongside the kit. It offers free hosting, support for WordPress, custom domains, SSL, and a database, and is presented as a companion product for teams that want to deploy sites built with MDB. Integration with an e-commerce setup through WordPress is also mentioned. The README includes tutorial links and YouTube video content aimed at people learning Bootstrap. The project claims to be used by over two million developers and designers worldwide.

Copy-paste prompts

Prompt 1

I'm building a Bootstrap 4 site and want Material Design styling using MDB. Show me how to install via npm and use an MDB card and modal component in my HTML.

Prompt 2

Using Material Design for Bootstrap, build me a responsive navigation bar with a dropdown menu and a search input field. Show me the exact MDB component markup to use.

Prompt 3

I want to switch from MDB Bootstrap 4 to MDB Bootstrap 5. What are the key differences and how do I update my existing component markup to the new version?

Open on GitHub → Explain another repo

← mdbootstrap on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.