Author: Michal Szymanski
MDB Pro required
This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.
Get MDB PRO
To begin, let's create a basic structure for our content.
Inside the <main> tags place the following code:
<!--Main layout-->
<main>
<!--Section: about-->
<section id="about" class="py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center mb-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet,
consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam.</p>
</div>
<!-- Container -->
</section>
<!--Section: about-->
<!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
</div>
<!-- Container -->
</section>
<!--Section: projects-->
<!--Section: gallery-->
<section id="gallery" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
</div>
<!-- Container -->
</section>
<!--Section: gallery-->
<!--Section: testimonials-->
<section id="testimonials" class="text-center py-5" style="background-color: #eee;">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Testimonials</h2>
</div>
<!-- Container -->
</section>
<!--Section: testimonials-->
<!--Section: call to action-->
<section id="">
</section>
<!--Section: call to action-->
<!--Section: articles-->
<section id="articles" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Articles</h2>
</div>
<!-- Container -->
</section>
<!--Section: articles-->
<!--Section: contact-->
<section id="contact" class="py-5" style="background-color: #eee;">
<div class="container">
</div>
</section>
<!--Section: contact-->
</main>
<!--Main layout-->
This is a lot of code, but everything is very simple. What we exactly did:
-
We divided
<main>into<section>to provide a more complex structure for our content. -
We set
IDs for eachsectionthat correspond with Navbar links. Now, when you click on any Navbar link you will be moved to the propersection. -
By using spacing we set a padding (example
.py-5) to provide additional space between sections. -
We set a grey background to every second section.
-
We placed
.containers inside eachsectionto provide a proper structure for a Bootstrap grid system. -
We added headings and descriptions.
Note: Because we set a different background color to different sections we cannot use a single
.container and place all the sections inside. That's why we use one .container for each
individual section.
Step 2 - features section
To accelerate the development process we can use predefined sections instead of building every single component.
Go to the Features Sections Docs and copy the code of Features v.3.
Next, place it within the "About" section in our project.
Note: Because we have previously added <section>element together with the
heading and description, we don't need to copy it the second time. That's
why from the Features Sections we copy only the grid part.
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Safety</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Technology</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!--Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Finance</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
And this is how it should look within our section:
<!--Section: about-->
<section id="about" class="py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center mb-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet,
consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Safety</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad
minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam
assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Technology</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad
minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam
assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!--Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Finance</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim
ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam
assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
</div>
<!-- Container -->
</section>
<!--Section: about-->
To provide a color consistency we changed the color of the icons by changing .indigo-text class to
purple-text class.
<i class="fa fa-mail-forward fa-lg purple-text"></i>
Step 3 - projects section
Go to the Projects Sections Docs and copy the code for Projects v.1.
And again - copy only the content of the beetwen .row elements, because we have already created <section>
tags, heading and description.
Next, place it inside of the <!--Section: projects-->. It should look like this:
<!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
<!-- Grid row -->
<div class="row text-center">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/images/58.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Title of the news</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae.
</p>
<a class="btn btn-purple btn-sm"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Title of the news</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae.
</p>
<a class="btn btn-purple btn-sm"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/images/88.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Title of the news</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae.
</p>
<a class="btn btn-purple btn-sm"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Container -->
</section>
<!--Section: projects-->
Note: To provide a color consistency we changed the color of the buttons by changing .btn-indigo class to .btn-purple class.
Rate this lesson
Previous lesson Live preview Next lesson
Spread the word:
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
1. Navigation and full-page background image
2. Masks and flexbox
3. Flexbox advanced options
4. Sections, icons and typography
5. Hover effect, waves effect and shadows
6. Carousel (slider / gallery)
7. Contact section and inputs / forms
8. Google Maps
9. Footer advanced options
10. Navbar advanced options