Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

MDBootstrap tutorial

As with Bootstrap, here too let's start with a key question:

What exactly is MDBootstrap?

MDBootstrap a.k.a. MDB (or MDB UI KIT) is a library that greatly extends the capabilities of regular Bootstrap.

You can look at MDBootstrap as Bootstrap on steroids. And it's free.

Why use MDBootstrap?

MDBootstrap contains all the features of Bootstrap and additionaly provides you with:

  1. Hundreds of additional quality components, design blocks & templates
  2. Much better design than Bootstrap
  3. Much wider customization, theming and optimization options than Bootstrap
  4. Integration with Material Design (a design system created by Google)
  5. Integration with the most popular JavaScript libraries, such as React, Angular or Vue
  6. Integration with the most popular backend and CMS technologies such as WordPress, Node.js, PHP and many more
  7. Integration with TypeScript
  8. Dozens of high-quality, free tutorials (like the one you're reading right now)
  9. Playground, where you can freely experiment with the code directly in your browser
  10. Integration with MDB GO and MDB CLI, i.e. free hosting and an open-source deployment platform, thanks to which you can publish your website for free on the Internet in a few seconds
  11. Much, much more that you will learn in this course

MDBootstrap has 4 versions dedicated to the most popular front-end technologies.

In addition, each of these versions has its own package in the latest Bootstrap v.5, and in the older Bootstrap v.4. Of course, I recommend you always use the latest version.

Note: MDB Standard is built with the default Bootstrap 5 version, and supported by plain JavaScript

MDB Standard - Bootstrap 5

MDB Standard

Plain JavaScript

MDB Angular - Bootstrap 5

MDB Angular

Angular 16

MDB React - Bootstrap 5

MDB React

React 18

MDB Vue - Bootstrap 5

MDB Vue

Vue 3

Note: MDB jQuery is built with the default Bootstrap 4 version, and supported by jQuery library

MDB jQuery - Bootstrap 4

MDB jQuery

jQuery 3

MDB Angular - Bootstrap 4

MDB Angular

Angular 12

MDB React - Bootstrap 4

MDB React

React 16

MDB Vue - Bootstrap 4

MDB Vue

Vue 2

Note: In this tutorial we will use the MDB Standard version, built on the basis of the default Bootstrap and plain JavaScript (so-called Vanilla JavaScript)

Prerequisites: This course assumes that you are already familiar with HTML and CSS. Knowledge of JavaScript is not required, although it is useful.

If you are not very comfortable with the above topics, please check out our related tutorials first:

I also assume you've followed the previous 2 tutorials (or at least you know and understand the topics we've covered there):

  1. MDB Basics tutorial
  2. Bootstrap tutorial
Join the conversation

If you have any questions or difficulties with the course, please post a question in our community forum.

About the author

At the end of this short introduction, a word about me.

My name is Michal, I am a co-founder of MDB and I will have the pleasure to introduce you to the world of our ecosystem 🙂 I hope you will find it not only extremely useful, but also super interesting and enjoyable.

If you want, we can stay in touch on twitter. I publish there useful stuff related to web development and UI / UX design.

Let’s get started!

John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.