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 24

  • User avatar

    Kamil Paciepnik

    Hi bikeman, you can create your own sass files and add them to the MDB. Check file - sass/mdb.scss. If you have more question, please write to me - k.paciepnik@mdbootstrap.com

  • User avatar

    bikeman

    Rather than adding colour classes to individual components is there an easy way to switch colour schemes, perhaps via sass variables?

  • User avatar

    ghbcv

    this si the comd

  • 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

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

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

Sign up for free