Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Basic Landing Page

Basic construction: sections, bootstrap grid, MDB components


Written by Michal Szymanski ,


Final result preview
Live preview

1. Open index.html file in your project folder (the folder where you have unzipped MDB package).

2. Let's create a basic structure of our project. We'll divide the page into the 3 sections:

<header> - for navigation

<main> - for website content

<footer> - for additional information and links


Paste following code below <body> tag:

    
<header>
</header>

<main>
</main>

<footer>
</footer>

3. We will create navigation bar first. From the MDB documentation (menu on the left, components -> navbars ) grab a Basic Navbar and paste it between <header> tags:

    
<header>


    <!--Navbar-->
    <nav class="navbar navbar-dark bg-primary">

        <!-- Collapse button-->
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
            <i class="fa fa-bars"></i>
        </button>

        <div class="container">

            <!--Collapse content-->
            <div class="collapse navbar-toggleable-xs" id="collapseEx2">
                <!--Navbar Brand-->
                <a class="navbar-brand" href="#">Navbar</a>
                <!--Links-->
                <ul class="nav navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                </ul>
                <!--Search form-->
                <form class="form-inline">
                    <input class="form-control" type="text" placeholder="Search">
                </form>
            </div>
            <!--/.Collapse content-->

        </div>

    </nav>
    <!--/.Navbar-->

</header>

Save the file and open it in the browser. You will see a blue navigation bar on the top of the page.

That was easy, wasn't it? Of course, our navigation requires a few modifications, but we'll take care of it later. Now let's try something more exciting.


4. Let's add a content to our website.

Before we do that, first we have to structure our project. We'll use a Bootstrap grid for that.

Paste the following code between <main> tags:

    
<main>

    <!--Main layout-->
    <div class="container">
        <!--First row-->
        <div class="row">
            <div class="col-md-7">

            </div>

            <!--Main information-->
            <div class="col-md-5">

            </div>
        </div>
        <!--/.First row-->

        <!--Second row-->
        <div class="row">
            <!--First columnn-->
            <div class="col-md-4">

            </div>
            <!--First columnn-->

            <!--Second columnn-->
            <div class="col-md-4">

            </div>
            <!--Second columnn-->

            <!--Third columnn-->
            <div class="col-md-4">

            </div>
            <!--Third columnn-->
        </div>
        <!--/.Second row-->
    </div>
    <!--/.Main layout-->

</main>

Now let's have a look at elements we've used above.

All of them are parts of Bootstrap Grid System, which let us create responsive websites adjusted to mobiles, tablets and desktops screens. By using the shortcode above, you've just created a responsive layout for your website, which will be displayed perfectly on all kind of devices!

But what these elements actually do?


Container

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers:

<div class="container-fluid"> - will display your content on full available width page

<div class="container"> - will center your content and give it an appropriate side padding. In the current project, we are going to use this one.


Row

Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally, use <div class="row">.


Columns

Bootstrap's grid system allows up to 12 columns across the page. To create a column use a special class <div class="col-md-*>, where "*" is the  number between 1 and 12.

grid

Examples:



2 columns grid:


<div class="row">
    <div class="col-md-6"> </div>
    <div class="col-md-6"> </div>
</div>


3 columns grid:


<div class="row">
    <div class="col-md-4"> </div> 
    <div class="col-md-4"> </div> 
    <div class="col-md-4"> </div>
</div>


4 columns grid:


 <div class="col-md-3"> </div> 
 <div class="col-md-3"> </div> 
 <div class="col-md-3"> </div> 
 <div class="col-md-3"> </div>


Important: Remember that grid columns should add up to twelve for a row.

Important 2: If you want to use Bootstrap's grid system you always have to use a basic construction with the container (or container-fluid) and row. Otherwise, your column won't work properly.


That's very basic info about Bootstrap Grid. Along the tutorial, you will learn more advanced tricks which let you use the full power of the grid.


Now let's get back to our current project.

In the first row, we are using 2 columns. One of them is a perfect place for an outstanding image that will be an eye-catcher for our visitors. The second column will be useful for heading, short description and call to action button.


5. In the first column of the first row place an image. You can use any image, by providing a correct URL.

    
<div class="col-md-7">
    <!--Featured image -->
    <img src="https://mdbootstrap.com/images/proffesions/slides/socialmedia/img%20(2).jpg" class="img-fluid">
</div>

Pay attention to the special class "img-fluid". It makes our image responsive, which means that it will always adjust to the screen size.

Thanks to that our visitors can enjoy watching it both on mobile and desktop.


We can easily enhance our image by adding a subtle shadow, hover effect and waves effect.

To achieve that we need to place the image within a special wrapper.

Replace the code of our image with the code below.

 
<div class="col-md-7">
    <!--Featured image -->
    <div class="view overlay hm-white-light z-depth-1-half">
        <img src="https://mdbootstrap.com/images/proffesions/slides/socialmedia/img%20(2).jpg" class="img-fluid " alt="">
        <div class="mask">
        </div>
    </div>
    <br>
</div>

Save the file and refresh your browser. Now you can enjoy all the effects.


6. As we said before, in the second column we'll place heading, short description and call to action. That will help our visitor to quickly understand what our website is about (heading and description) and what action we expect from them (call to action button).

 
<!--Main information-->
<div class="col-md-5">
    <h2 class="h2-responsive">We are professionals</h2>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis natus quaerat!</p>
    <a href="" class="btn btn-primary">Get it now!</a>
</div>

Class .h2-responsive makes our heading looks good on devices of all sizes.

If you want to play with it, you can change a call to action button. MDB provides you a huge variety of buttons.

Go to BUTTONS section in our documentation and use the element you like the most.

Save the file and open it in the browser.

Thanks to MDB our project is growing fast, so let's keep going!


7. In the second row, we are going to add some detailed information about our website. Our cards will do the work.

Cards are great to present content to the users. They are clear, easy to use and elegant. Facebook uses cards, Google uses cards, LinkedIn uses cards. You also should do that, especially that MDB provides you really outstanding cards.

Go to the CARDS section in MDB documentation and grab the Card with Waves Effect. Then paste it to every column of the second row.


After all your second row should look like this:


<!--Second row-->
<div class="row">
    <!--First columnn-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(2).jpg" class="img-fluid" alt="">
                <a href="#">
                    <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 href="#" class="btn btn-primary">Read more</a>
            </div>
            <!--/.Card content-->

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

    <!--Second columnn-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(4).jpg" class="img-fluid" alt="">
                <a href="#">
                    <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 href="#" class="btn btn-primary">Read more</a>
            </div>
            <!--/.Card content-->

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

    <!--Third columnn-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(8).jpg" class="img-fluid" alt="">
                <a href="#">
                    <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 href="#" class="btn btn-primary">Read more</a>
            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->
    </div>
    <!--Third columnn-->
</div>
<!--/.Second row-->

Save the file and open it in the browser.


8. Now it's time for the footer.

Go to the FOOTERS section in MDB documentation and grab the code of Basic Footer. Then paste it to our project:


<!--Footer-->
<footer class="page-footer blue center-on-small-only">

    <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">

            <!--First column-->
            <div class="col-md-6">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

            <!--Second column-->
            <div class="col-md-6">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->
        </div>
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->

You can see that our footer already contains a color class "blue", which makes it blue. You can easily change it by using one of over 300 defined color classes provided by MDB, but we'll talk about it later.

Alright, the main layout of our website is done, but it's still a lot of details to improve.

I.e. navbar and footer, colors are different, and their links are stretched full-width, which doesn't look good. Also content in our rows of <main> section are too close to each other. And there are few more things which should be fixed.

That website definitely requires more work to make it looks professional. We'll take care of it in the next lesson.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

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 53

  • User avatar

    Marta Szymanska

    Hi John Groenendijk, we will update this tutorial lesson soon. Sorry for these problems, but as Magdalena said try to use code from our documentation here: https://mdbootstrap.com/components/navbar/ .

  • User avatar

    John Groenendijk

    Hi team. I face the same issue with the navbar as stated below by Jake. I'm using the pro version and none of the examples with navbar are working, or aren't working as expected.

  • User avatar

    Madgalena Obalska

    Hi, Jake, thank you for your report, we'll fix that. Try to use our navbar code from here: https://mdbootstrap.com/components/navbar/, it works for sure.

  • User avatar

    Jake

    THe navigation bar only creates a blue 1/4" div at the top of the page, it doesn't populate the nav links. I have copied and pasted the navbar directly from the tutorial here on this page. If you believe it DOES work, then get a raw mdbootstrap skeleton and paste the navbar html into the header tags. It won't work with MDB Free 4.3.2.

  • User avatar

    Kamil Paciepnik

    Hi Soufiane, please write me on e-mail - k.paciepnik@mdbootstrap.com Attach the broken code.

  • User avatar

    Soufiane

    Hello guys , excellent work btw , my probleme is when I copy the code of the navigation bar , it doenst past the link boxes , just the color blue ps : Im running this on Webstorm jetbrain

  • User avatar

    Marta Szymanska

    Hi Abdul, please tell me what exactly output do you get? And give here links for MDB tutorials you did and I will help you.

  • User avatar

    Abdul Hannan

    Hey i followed the beginner tutorial part 1 but it gives me a different output.i also copied your code but no success.kindly help me to understand what i am doing wrong.

  • User avatar

    Kamil Paciepnik

    Hi bikeman, of course you can create your own color palette using sass files. All sass files that you add I suggest you type in a file mdb.scss. If you have more question about add colour schemes, please write to me k.paciepnik@mdbootstrap.com

  • User avatar

    bikeman

    Is there an easy way to switch mdb lite colour schemes, perhaps via sass variables?

  • User avatar

    Matas

    Hi Sergio, checkout the live preview, it also uses the latest bootstrap. If you investigate the source of the header you will find it is a bit different from the tutorial. Just copy that and adjust that for your neeeds

  • User avatar

    Seb

    Hey sergio, had the same issue, problem is surely your bootstrap version... If you have alpha version 6, tyou get this issue with the actual code of MDB4. You need to downgrade your bootstrap (inconvenient to work with alpha versions...)

  • User avatar

    sergio

    Hi, I have an issue with the header. I have copied and pasted the code and got this http://hmp.me/3uy Somebody knows the reason? thanks in advance Sergio

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