Colors, spacing and responsiveness


Step 1

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

In some cases that desirable, but in our current project it doesn't look very good. So let's change the class .container-fluid to .container within our footer.



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

    

Step 2

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

Finally your navbar should look like this:



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <!-- Additional container -->
  <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 my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->

  </div>
  <!-- Additional container -->

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

    

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

Step 3

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. So let's fix it.

Go to our COLORS DOCUMENTATION .You will find within there more than 300 defined color classes that can be used in our project just by adding a color name to our document.

We are going to use the .indigo color class.

Add a class .indigo replacing the .blue from the footer.



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

    

Next, do it the same with the navbar and replace .primary-color with .indigo class.



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

    

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 the footer and the navbar change the color of the buttons.

Now 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 now use spacing utilities. Here is an example of how they works:

Note: In MDB 1 rem = 16 px

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

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

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

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

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

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

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



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

    

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

Step 5

First, add class .mb-4 to both of 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 the .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 over responsiveness. On small screens, when 2 columns move one under another, we need some additional margin.

Now take a look how it looks on a 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 the .mb-4 class to each of them.



<!--Grid column-->
<div class="col-lg-4 col-md-12 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 it means.

Actually, it's very simple concept: we want the first column to have a length of 4 columns on large screens (lg = a 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 in the 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.

Congratulations! You have finished your first MDB Tutorial.

Now, you know the basics of MDB and so you can improve the website on your own.You can change texts, images and links. You can also use our documentation to add new components and content. Finally you can change the screen size and see how nice your website looks on mobile.

Now everything depends on you.

In the later tutorials you will learn some more advanced techniques which will let you create really stunning projects.


Rate this lesson

Previous lesson Live preview Next lesson

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

About the 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