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 42

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.