Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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 Visual Studio Code and Sublime Text :)

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.6.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.1.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.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 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-->


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

  <!--Card image-->
  <div class="view overlay hm-white-slight">
    <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"></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 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

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 87

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more