Features and projects sections

web
mobile

Author: Michal Szymanski

-

Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW
Webinar

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW
Webinar

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, is as follows:

  1. We divided <main> into some<section>s to provide a more complex structure for our content.

  2. We set IDs for each section each correspond with Navbar links. Now, when you click on any Navbar link you will be moved to the proper section.

  3. By using spacing we set a padding (for example .py-5) to provide additional space between sections.

  4. We set a grey background for every second section.

  5. We placed .containers inside each section to provide a proper structure for a Bootstrap grid system.

  6. 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 - the 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 a <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="fas fa-share 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="fas fa-share 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="fas fa-share 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="fas fa-share 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="fas fa-share 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="fas fa-share 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 the .indigo-text class to the purple-text class.



      <i class="fas fa-share 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 between .row elements, because we have already created <section> tags, heading and description.

Next, place it inside of <!--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="fas 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="fas 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="fas fa-clone left"></i> View project</a>
              </div>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </div>
        <!-- Container -->

      </section>
      <!--Section: projects-->

Note: To provide a consistent color we changed the color of the buttons by changing the .btn-indigo class to the .btn-purple class.

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, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.
Sign up to follow your progress and get additional benefits