Sections, icons and typography

Author: Michal Szymanski

-

Step 1

To begin, let's create a basic structure for our content.

Inside the <main> tags place the following code:



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

        <!--Section: Best Features-->
        <section id="best-features">



        </section>
        <!--Section: Best Features-->

        <hr class="my-5">

        <!--Section: Examples-->
        <section id="examples">



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

        <hr class="my-5">

        <!--Section: Gallery-->
        <section id="gallery">



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

        <hr class="my-5">

        <!--Section: Contact-->
        <section id="contact">



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

    </div>
</main>
<!--Main layout-->

As you can see, we've divided our content into sections .

section does not have any special properties, but provides necessary clarity and readability for our project.

Each section contains an ID. We'll use that later to connect the sections with Navbar links.

Remember: in a single document it can be only one element with a specific ID. Using the same ID in multiple elements can cause serious problems.

Between the sections we've placed a divider with both top and bottom margins (Y axis) to separate one section from another.

We've also added .mt-5 to the main element to provide a proper margin for our Intro.

There is one more thing worth noting: always use comments to describe your code. That will be extremely helpful for you and your coworkers when your project grows.

Step 2

To the section "Best Features", add a following snippet:



<!--Section: Best Features-->
<section id="best-features" class="text-center">

  <!-- Heading -->
  <h2 class="mb-5">Best Features</h2>

  <!--Grid row-->
  <div class="row d-flex justify-content-center mb-4">

      <!--Grid column-->
      <div class="col-md-8">

          <!-- Description -->
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellat
              facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis est
              sit pariatur.</p>

      </div>
      <!--Grid column-->

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

  <!--Grid row-->
  <div class="row">

      <!--Grid column-->
      <div class="col-md-4 mb-1">
          <i class="fas fa-camera-retro"></i>
          <h4 class="my-4">Experience</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-4 mb-1">
          <i class="fas fa-heart"></i>
          <h4 class="my-4">Happiness</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-4 mb-1">
          <i class="fas fa-bicycle"></i>
          <h4 class="my-4">Adventure</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

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

</section>
<!--Section: Best Features-->

It seems to be a lot of code, but there is nothing new - we have learned about all those things in previous lessons.

Apart from the one thing - icons

Have a look at this code:



<i class="fas fa-camera-retro"></i>

If you want to use icons you always have to use .fa class (it stands for "Font Awesome").

Next, you use an identifier of the particular icon (for example .fa-camera-retro).

Here you can find a full list of over 1479 available icons.

Step 3

We'll make our icons bigger. That's easy to achieve - we just need to add the class .fa-2x, .fa-3x, .fa-4x or .fa-5x to the i element.

We'll use .fa-4x

To learn more about advanced usage of the icons read our Icons Usage Docs



<i class="fas fa-camera-retro fa-4x"></i>

    


<i class="fas fa-heart fa-4x"></i>

    


<i class="fas fa-bicycle fa-4x"></i>

Alright, that looks good. Nevertheless, it could be even better if it had a more lively color.

So let's add the class .orange-text to the icons.

To learn more about text color read our Text Color Docs.



<i class="fas fa-camera-retro fa-4x orange-text"></i>

Step 4

Finally, we'll make some improvements of our typography.

Add the class .grey-text to each description, and .font-weight-bold to the headings.

To learn more about text modifications read our Text Utilities Docs.

After all your "Best Features" section should looks like that:



<!--Section: Best Features-->
<section id="best-features" class="text-center">

  <!-- Heading -->
  <h2 class="mb-5 font-weight-bold">Best Features</h2>

  <!--Grid row-->
  <div class="row d-flex justify-content-center mb-4">

      <!--Grid column-->
      <div class="col-md-8">

          <!-- Description -->
          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellat
              facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis est
              sit pariatur.</p>

      </div>
      <!--Grid column-->

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

  <!--Grid row-->
  <div class="row">

      <!--Grid column-->
      <div class="col-md-4 mb-5">
          <i class="fas fa-camera-retro fa-4x orange-text"></i>
          <h4 class="my-4 font-weight-bold">Experience</h4>
          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-4 mb-1">
          <i class="fas fa-heart fa-4x orange-text"></i>
          <h4 class="my-4 font-weight-bold">Happiness</h4>
          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-4 mb-1">
          <i class="fas fa-bicycle fa-4x orange-text"></i>
          <h4 class="my-4 font-weight-bold">Adventure</h4>
          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
              assumenda deleniti hic.</p>
      </div>
      <!--Grid column-->

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

</section>
<!--Section: Best Features-->
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, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits