Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

5 min Quick Start


Written 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 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-->

    <!-- /Start your project here-->
    

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-2.2.3.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: Copy and paste the following code just below <body> tag, between the comments <!--Start your project here-->:


<!--Start your project here-->                            
<div class="container">
    <div class="row">
            <div class="col-md-6">

                <!--Card-->
                <div class="card">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->

                    <!--Card content-->
                    <div class="card-block">
                        <!--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 class="btn btn-primary">Button</a>
                    </div>
                    <!--/.Card content-->

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

            </div>
        </div>
</div>
<!--/Start your project here-->

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

Step 5: 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!


Great! Now you are ready to start our tutorials.

Start tutorial

Do you want to share?


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 73

  • User avatar

    Madgalena Obalska

    Michael Louie, thank you for your message. Yes, you're correct. If you're not sure about how to use MDB, use our hints: https://mdbootstrap.com/getting-started/.

  • User avatar

    Michael Louie

    I take it that we are required to use CDN links to mdb.min.css, mdb.min.js, and the roboto fonts if we were to say publish our website per the license agreement, correct? Certainly not push to GitHub though. Sorry, I am new to web development. Other than that, good stuff and looking forward to using MDB!

  • User avatar

    Edyta Dabrowska

    @smfmoreno, currently we do not have dedicated package for drupal, however you can create it yourself following this guide: https://www.drupal.org/docs/8/theming

  • User avatar

    smfmoreno

    149/5000 Sorry but I am a beginner and I have a question: in a project of drupal 8, where I unzip your package? Thanks! Best regards

  • User avatar

    XeBIi

    Indeed a great revamp of Bootstrap with Material :)

  • User avatar

    Eddie Cheng

    Hello from a Singapore web design company. Thank you for your great work. Its amazin and beautiful

  • User avatar

    Jaikant Kumar Nirala

    Perfect Application of Material Design, It's Good! I love this bootstrap...... really cool and awesome..

  • User avatar

    Rahul Sharma

    I was searching for bootstrap free template since a month for my blog but was not satisfied with those. I think my search for template will end here.

  • User avatar

    sikandar saini

    Superrrrrrrrr yrrrrrrrrrrrrr

  • User avatar

    Bartłomiej Malanowski

    @kontor, thank you! We're so glad to hear such a nice words. That motivates us to keep working to make MDB even better ;)

  • User avatar

    kontor

    Awsome work! Just bought the Big Bundle pack, appriciate the good work guys! keep making new widgets :D

  • User avatar

    Blake

    Hi folks. This is really nice, and I do indeed like how the approach to 'learning' is here, very satisfying. A great set of tools and info, i'm sure this will start a new rush for you. Thanks for this, Very Appreciated.

Leave a reply

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free