Free UI/UX design course

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

Start learning

Download, installation and setup

I will show you 2 methods to install MDB:

  1. .zip downlad - the easiest and fastest method, but with some limitations
  2. MDB CLI installation - a recommended method that allows you to use the full potential of the MDB environment

I suggest you try both methods, but in the end it's best if you use MDB CLI.

.zip download

Step 1 - download and setup

Go to the installation page and click the big, red button "MDB 5 download".

Then unzip the downloaded package and open it in your favorite code editor.

Note: The code editor is a matter of preference, but if someone asks me what I would recommend, my answer is Visual Studio Code.

It's free and you can download it here.

Step 2 - open index.html file

In the unpacked MDBootstrap directory, locate the index.html file, then drag and drop it into the browser window. You will see the MDBootstrap welcome message.

Bootstrap

Then open index.html in the code editor. You will see a code like this:

        
            

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <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 for Bootstrap</title>
        <!-- MDB icon -->
        <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
        <!-- Font Awesome -->
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
        />
        <!-- Google Fonts Roboto -->
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
        />
        <!-- MDB -->
        <link rel="stylesheet" href="css/mdb.min.css" />
      </head>
      <body>
        <!-- Start your project here-->
        <div class="container">
          <div class="d-flex justify-content-center align-items-center" style="height: 100vh">
            <div class="text-center">
              <img
                class="mb-4"
                src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
                style="width: 250px; height: 90px"
              />
              <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
              <p class="mb-3">MDB Team</p>
              <a
                class="btn btn-primary btn-lg"
                data-mdb-ripple-init
                href="https://mdbootstrap.com/docs/standard/getting-started/"
                target="_blank"
                role="button"
                >Start MDB tutorial</a
              >
            </div>
          </div>
        </div>
        <!-- End your project here-->
    
        <!-- MDB -->
        <script type="text/javascript" src="js/mdb.umd.min.js"></script>
        <!-- Custom scripts -->
        <script type="text/javascript"></script>
      </body>
    </html>

That's quite a lot of code, and it can feel a bit overwhelming to start with. But don't worry, it's actually very simple and if you want to learn what exactly every line of this code does we have already explained it in the previous tutorial.

Live server extension: If you use Visual Studio Code editor I recommend you to install very useful extension called Live Server. It enables live reload in your browser, so you don't need to refresh the browser after you make changes in your code. Live server will do it for you and automatically refresh the browser after you save the file.

If everything works for you according to plan, it's time for a slightly bigger challenge. Click "next" and let's look at installation via MDB CLI.

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.