Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Improve Layout

Improving the layout


Written by Michal Szymanski ,


Final result preview
Live preview Previous lesson

1.  Fixing footer's links

Take a look at footer's code. You will see that it contains class "container-fluid". If you have read the previous lesson you know, that using "container-fluid" will stretch the content to full available width.

In some cases, it's desirable but in our project, it doesn't look very well. Let's change "container-fluid" to "container" within our footer.


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

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

Save the file and open it in the browser. Now layout is equal and looks more consistent.


2. Changing colors of the components

It's time to have a little fun with colors.

Our navbar is dark-blue and looks pretty nice. Our footer is light-blue and looks good as well. But they don't create a consistent composition together. Let's fix it.

Go to the COLORS section in MDB documentation. You will find it more the 300 defined color classes which can be used in our project just by adding a color name to our document.

Let say that we are going to use .primary-color-dark (this is the color of the Navbar).  

Add a class .primary-color-dark and remove old .blue from the footer.


<!--Footer-->
<footer class="page-footer primary-color-dark center-on-small-only">

You can use any color you like and add it to each MDB element. Manipulating colors with MDB is incredibly easy and fast.


3. Improving a layout

The first and the second row of our layout seems to be pretty close each other. Actually, to close. We can fix it easily by adding <hr> between them.


            </div>
            <!--/.First Row-->
            
            <hr>

            <!--Second Row-->
            <div class="row">

After refreshing the webpage, we can see a nice divider between our two rows. However, space above and below is not equal.

Let's fix it by adding a class .extra-margins to the divider.


            </div>
            <!--/.First Row-->
            
            <hr class="extra-margins">

            <!--Second Row-->
            <div class="row">

When you refresh your browser, you will notice that changed nothing. That's because we need to add a custom CSS code to make it works.

Open the file style.css (you can find it in the CSS folder.)

Then paste the code below and save the file:


.extra-margins {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

In that simple way we've added a proper margin to our divider.

Note: In this case, 1rem is equal 16pixels .If you want you can use px instead of rem - the result will be the same.


We have to improve one more thing. Our layout needs and extra padding on the top and the bottom, because Navbar and Footer are too close to the content.

Add this code to style.css.


main {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

Alright, now everything looks great.

Now, when you know basics of MDB you can improve the website on your own. Change texts, images and links. Use our documentation to add new components, add more content. Change the screen size and see how nice your website looks on mobile.

Now everything depends on you.

In the next tutorials, you will learn more advanced techniques which will let you create really amazing things.


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

Download Live preview Next 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 21

  • User avatar

    Agustin

    Hi Michal! I ´m develping my own website and this tutorial and this Material Design tools are very useful for me! Thank you very much and i would like to have more tutorials.

  • User avatar

    Michal Szymanski

    Glad to hear that Augustin. Each day we will publish one new tutorial ;)

  • User avatar

    Slim Zephyr

    very helpfully. Thank

  • User avatar

    Tanuj Srivastava

    Michal you are the man! Awesome work buddy!

  • User avatar

    Michal Szymanski

    Thanks! I'm glad you find it useful ;)

  • User avatar

    alexandr.revenoc

    Thanks for such Cool tutorial! I'm novice in not only in MDBootstrap but also in html5 and CSS3. I have some question - does production web developmer do all layout form scratch by coding all elements or he just uses predicative pattern like we do on this tutorial? Thanks!)

  • User avatar

    Michal Szymanski

    Hi Alexandr.revenoc. They use a patterns and frameworks a lot, for sake of faster development, but they understand what the code is exactly doing. Learn some basic of CSS and HTML, and then come back to MDB :)

  • User avatar

    shashi

    Hello Michal, First of all thank you for making such a wonderful framework package .Now I have a question that I tried to create the page as directed by this article but it not showing the same final result as it shown in live preview .I'm attaching a screenshot here ,you can see that images are far more bigger than expected .I feel through css the images should be adjusted though looking through the code of your final preview you guys also applied same css as you guided here in the tutorial ,then why my output is different than your final preview ?? screenshot-1: http://imgur.com/xtBhkPj screenshot-2: http://imgur.com/m5tMLts

  • User avatar

    Michal Szymanski

    Hi Sashi, did you add "img-fluid" class to your image? About the other issues - download the final files from the last lesson and compare with your project. It's hard for me to tell you what's wrong without inspecting the code.

  • User avatar

    shashi

    Yeah I have added img-fluid class ,still its not showing the way final preview is .I also downloaded the final code and there is no difference .Further I also tried to save the code of final preview page with respect css/style etc but it ended up having same results as before .There is one more thing I want to point out that in final preview ,my code is all same as your code still why this difference exist ? Here is the code : http://pastebin.com/pC75C59u

  • User avatar

    Michal Szymanski

    Send me all the files of your project( zipped in one package) and I'll check what's wrong - m.szymanski@mdbootstrap.com

  • User avatar

    shashi

    Hi , I have send you required attachment in a mail with subject line "problem with code ,check attachment !" Kindly check and respond .thank you !

  • User avatar

    Michal Szymanski

    Shashi - as I wrote you in email: this tutorial refers to MDB4 for Bootstrap4 . You use MDB3 for Bootstrap 3, so it cannot work properly.

  • User avatar

    shashi

    Thank you so much ,you guys has done a wonderful job :)

  • User avatar

    Michal Szymanski

    Thanks, I'm glad to hear that :)

  • User avatar

    fruzepro

    waouh!!! Thanks a lot. By following this tutorial, I realize I'll soon become a UI/UX Designer. May God bless u .

  • User avatar

    Michal Szymanski

    I'm happy to hear that Fruzepro! :)

  • User avatar

    C. LIttle

    The Site has MDB files for 3 do the tutorial in 3. Learning new code is hard enough without changes the horse in mid stream. You want folks to use MDB but this tutorial is going to make folks hate it cause they can't get the same results. Get real!

  • User avatar

    Michal Szymanski

    C. LIttle, I have really tried but I didn't get your point. Write me what exactly doesn't work as expected and I'll help you

  • User avatar

    jwallner

    Hi Michal, Just bought the the pro product yesterday. No problems with anything so far and love the code re-usability. Being so new to the product, are there any examples of form processing or will we need to write our own PHP scripts? Thanks again for the great product. John Wallner

  • User avatar

    Bartłomiej Malanowski

    Hi, @jwallner! Unfortunately, we don't provide any PHP scripts. It's because it's your choice what's the technology you want to use. In this case, you need to write your own PHP scripts. Anyway, if you need some help please contact me at b.malanowski@mdbootstrap.com

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.