Sign in

Sign up

5 min Quick Start

by Michal Szymanski,

Step 1

If you haven't downloaded MDB package yet, go to Getting Started page and download it now.

Step 2

Unzip downloaded package and open index.html file using your favorite text editor

PS: Many people ask us what program do we recommend to write code. Well, it doesn't matter that much, but personally, we love using Visual Studio Code :)

You should see the following code:

<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">


    <!-- Start your project here-->
    <div style="height: 100vh">
        <div class="flex-center flex-column">
            <h1 class="animated fadeIn mb-2">Material Design for Bootstrap</h1>

            <h5 class="animated fadeIn mb-1">Thank you for using our product. We're glad you're with us.</h5>

            <p class="animated fadeIn text-muted">MDB Team</p>
    <!-- /Start your project here-->

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>


All necessary files are already linked, so everything is ready to start. If you read comments carefully, you will easily figure our what is the responsibility of all imported files.

Let's add the first MDB component to our index.html file.

Step 3

Between the comments <!--Start your project here--> you will find a sample code. Remove it.

Step 4

Copy and paste the following code just below <body> tag, between the comments <!--Start your project here-->

<div class="card m-5" style="width: 22rem;">

  <!--Card image-->
  <div class="view overlay hm-white-slight">
    <img src="" class="img-fluid" alt="">
    <a href="#">
      <div class="mask"></div>

  <!--Card content-->
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>


Step 5

Save the file and open it in you browser. You will see a gorgeus, responsive and interactive card.

Step 6

Explore our documentation (menu on the left). Choose components you like, copy it to your project and compose your website. And yes, it's that simple!

Next tutorial

Do you want to share?

Facebook Twitter Google +

About author

User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.

Comments 102

  • Gerard Fossoul

    I bought version 4.4.5 PRO (jquery) How can I download version 4.5.2 PRO? Do I have to pay every time there is an update?

  • Miriam

    Hi, I tried to do my first page (i already know Boostrap4) but if i create a new file on my desktop with the meta tags and the links it doesn't work, instead if i create it in the same field of the file index.html it works. How can i do ?

  • Arslan Gondal

    Hi, Can you please provide your CSS and JS as a maven WebJar, this way we don't have manully download a new version. Also this way we won't have to be depended on the version of jQuery and Bootstrap shipped with your UI kit. Thanks

  • Bob

    Do I need to install Bootstrap 4 first, then install mdboostrap or just mdboostrap is enough? I am using Angular 2/4. Thanks.

  • Soma

    Hi Michal. My basic setup is not displaying the page properly, could you please help me. I used just the 2 CDNs for the mdbootstrap css and JS in the appropriate index.html file and copied the sample project code. But it is not displaying properly; formatting is off. Am I missing anything besides the two CDNs (css & js) to get mdboostrap to show properly?

  • Tiago

    Hello! Can I use MDB to build Hybrid apps layout with Cordova / Phonegap? Overall how is performance while using MDB in apps?

  • Tri Hapsari

    I Think boostrap don't get material design. Thank you i can use this

  • Abelardo

    Hello, I have got several issues. I prefer to mention them together inside this post: 1) In Step 6 is mentioned "menu on the left"; which do "menu on the left" refer you? I am not able to find it inside the downloaded example. Do you refer to your website? By the way, I LOVE YOUR PROJECT. THANK VERY MUCH FOR OFFER US IT. 2) I wonder if you can watch us a benchmarking between "free" and "premium" versions in order to know which component is available in each package. 3) Does the "premium" version include everything including BrandFlow - Marketing automation for Bootstrap and other marvelous products? Which is not included in this version?

  • lmendivil

    Hi! Can u see this please: ? My question is how can remove the blank between one imagen and the next? I really think I do not like. I wanna see it like this: or like this Thanks a lot! PS. Sorry for my english, it is not my native language.

  • Duhamel

    First of all, awesome this stuff. Just a question, I saw this ( and I'm asking if there is any relationship with mdbootstrap. Thanks

  • utkuferuz

    Hi Guys, When are you planning to come up with npm package for the mdb pro?

  • Michal Szymanski

    Lyudmil, there is a 5min QuickStart for MDB Angular: In the near future we are going to create an entire tutorial for angular. Stay tuned.

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us