MD Bootstrap 5-minute Quick Start


Note:

According to your preference, you can follow a video or written version of the MDB 5-minute Quick Start.


Written version:

Step 1

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

Step 2

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

Note: 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">

<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 Bootstrap</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 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">
</head>

<body>

    <!-- 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>
        </div>
    </div>
    <!-- /Start your project here-->

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.3.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>
</body>

</html>
      

All of the necessary files are already linked, so everything is ready to start. If you read the comments carefully, you will easily figure out what is the role of all of the 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 some sample code. Remove it.

Step 4

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


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

  <!--Card image-->
  <div class="view overlay">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

  <!--Card content-->
  <div class="card-body">
    <!--Title-->
    <h4 class="card-title">Card title</h4>
    <!--Text-->
    <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>
  </div>

</div>
<!--/.Card-->
      

Step 5

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

Step 6

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


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits