Corporate website – lesson 3


Step 1

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 current project it doesn't look very well. Let's change .container-fluid to .container within our footer.


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

Step 2

Now we'll do the same for Navbars links. In this case, we need to add a new container and place all the Navbars elements inside it.

Finally you Navbar should look like that:


<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">
    <div class="container">

        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <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>

                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>

            </ul>
            <!-- Links -->

            <form class="form-inline">
                <div class="md-form mt-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                </div>
            </form>
        </div>
        <!-- Collapsible content -->

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

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

Step 3

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

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

Go to the COLORS 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.

We are going to use .indigo color.

Add a class .indigo and remove old .blue from the footer.


<!--Footer-->
<footer class="page-footer text-center text-md-left font-small indigo pt-4 mt-4">
                    

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

Apart from Footer change also color of the buttons.

Replace the class .btn-primary with the class .btn-indigo within each button of our project.


<a href="#" class="btn btn-indigo">Button</a>
                        

Step 4

To fix our layout we'll use spacing utilities. Here is an example how does it work:

Note: In MDB 1 rem = 16 px

1. If you add class .mr-4 to given element it will get 1.5 rem right margin.

2. If you add class .pt-2 to given element it will get 0.5 rem top padding.

3. If you add class .mx-1 to given element it will get 0.25 rem right and left margins.

4. If you add class .py-5 to given element it will get 3 rem top and bottom paddings.

5. If you add class .m-5 to given element it will get 3 rem top, right, bottom and left margins.

To learn more about spacing utilities take a look at SPACING DOCUMENTATION.

Now add class .mt-5 to the <main> element.


<!--Main layout-->
<main class="mt-5">
                                  

Save the file and refresh your browser. Our top layout is fixed.

Step 5

Add class .mb-4 to the both columns of the first row.


<!--Grid column-->
<div class="col-md-7 mb-4">
                                  

<!--Grid column-->
<div class="col-md-5 mb-4">
                                  

You may ask, why do we add .mb-4 class to both columns when it seems to works fine even if we add it only to the first one?

The answer is - to take care about responsiveness. On the small screens, when 2 columns jump one under another, we need additional margin.

Take a look how it looks on on resolution smaller than 768 px with and without .mb-4 in both columns.

Step 6

Let's do the same with the columns within the second row. Add .mb-4 to each of them.


<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
                                  

<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
                                  

<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
                                  

Have you noticed that strange grid construction col-lg-4 col-md-12 and col-lg-4 col-md-6 ?

Let me explain what does it mean.

Actually, it's very simple concept - we want the first column to have a length of 4 columns on the large screens (lg = screen wider than 1200px ) and 12 (which means full page width) or 6 columns on medium screens.

If you want to learn more about Responsive Breakpoints of Bootstrap Grid System take a look at our Layout Documentation.

After saving and refreshing the browser you will notice that everything looks great - both on desktop and mobile screen.

Congratulation! You have finished first MDB Tutorial.

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 stunning projects.


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits