Author: Michal Szymanski
Take a look at footer code. You will see that it contains the class
If you have read the
previous lesson you would know, that using
.container-fluid stretches the content to the full
In some cases that desirable, but in our current project it doesn't look very good. So let's change the class
.container within our footer.
<!--Footer Links--> <div class="container">
Now we'll do the same for the navbar links. In this case, we need to add a new
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.
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
<!--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>
To fix our layout we'll now use spacing utilities. Here is an example of how they works:
Note: In MDB
1 rem =
1. If you add the class
.mr-4 to a given element it will get an 1.5 rem
2. If you add class class
.pt-2 to given element it will get a 0.5 rem top
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 layout--> <main class="mt-5">
Save the file and refresh your browser. Our top layout is now complete.
First, add class
.mb-4 to both of
columns of the first
<!--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
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
Let's do the same with the columns within the second
row. Add the
.mb-4 class to each of
<!--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
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.
Previous lesson Live preview Next lesson
Spread the word:
Install MDB CLI
It's the fastest way to create and host MDB projects