Chapter 5. Making It Fancy

It is finally time to take our last step through the landing page example. After learning all the basics of Bootstrap, passing from side to side of the grid system, mobile-first development, and using Bootstrap HTML elements, the landing page example has come to an end. Now it is time to go a little deeper and acquire more knowledge of this beautiful framework—Bootstrap.

In this chapter, we will focus on adding components all over the landing page. We will also touch upon the flexbox option, present in version 4. After all has been said, our landing page will be ready for the production stage. Get ready for the key points that we will cover in this chapter:

Glyphicon icons
Navigation bars
The Drop-down component
Input grouping
Flexbox Bootstrap usage

Using Bootstrap icons

Bootstrap is such a nice thing! It provides for us more than 250 icons ready for use and fully resizable. The icons were created from the Glyphicon Halflings set (http://glyphicons.com/). They are fully rendered as fonts, so you can customize both size and color for each one of them. To make use of that, let's see the features section on the landing page. As you can see, we let this section be a little simpler. By adding some fonts, we will get a nicer result:

<section id="features">
  <div class="container">

    <!-- row 5 -->
    <div class="row">
      <div class="col-sm-12">
        <h3 class="text-center">Features</h3>
        <p class="text-center">Features headline message</p>
      </div>
    </div>

    <!-- row 6 -->
    <div class="row">
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
          <span class="feature-tag">Product focus</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
          <span class="feature-tag">Teaching as a passion</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
          <span class="feature-tag">Spreading knowledge</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
          <span class="feature-tag">Save your day time</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
          <span class="feature-tag">Make it fancy</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
          <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
          <span class="feature-tag">Made with love</span>
        </div>
      </div>
      </div>
    </div>
  </div>
</section>

So, from the beginning, here is the code of the modified features section. The bold text corresponds to the icon additions. It is pretty simple to add an icon. Just check out the options at http://getbootstrap.com/components/#glyphicons, copy the class code, and use it in an element. Note that you must add both classes, .glyphicon and .glyphicon-*.

Tip

The aria-hidden property

You may have noticed that there is a property called aria-hidden="true" present in all the icons. The reason for this is that the fonts are represented as Unicode characters, meaning they may represent words. Therefore, to prevent that accessibility, screen readers start reading those characters such as they are words, the aria-hidden attribute prevents that.

Even more, we made some changes to the CSS file, adding more rules for the current working section. Add the following style to the base.css file, located in the css folder:

section#features .feature {
  padding-top: 2rem;
  padding-bottom: 4rem;
  text-align: center;
}

section#features .glyphicon {
  font-size: 2rem;
}

section#features .glyphicon-heart {
  color: #E04C4C;
}

section#features .feature-tag {
  max-width: 10.7em;
  display: inline-block;
  text-align: left;
  margin-left: 1.5em;
  font-size: 1.7rem;
}

With this, we want to show some nice options that you can use with icons. The first one is that you can change the size of the icon by changing its font size. In our case, we set it to font-size: 2rem. The second one is that icons provide the option to change their color by just adding the CSS color rule. We applied it to the heart icon, because the heart must be red—color: #E04C4C.

The preceding screenshot shows the final result of the Features section. As you can see, it is pretty simple to use icons in Bootstrap. Also, the possibilities that the framework offers are very suitable for daily adjustments, such changing icons' colors and sizes.

Tip

Using other icons sets

There are plenty of other icon sets out there that can be used just like glyphicons for Bootstrap. Among all of them, it is worth mentioning Font Awesome (https://fortawesome.github.io/Font-Awesome/). It stands out from others, since it was the first icon set to use font encoding, together with a wide variety of icons.

Previous Chapter

Summary

Next Chapter

Paying attention to your navigation

Table of Contents for Bootstrap 4 – Responsive Web Design

Chapter 5. Making It Fancy

Using Bootstrap icons

Tip

Tip

Table of Contents for
Bootstrap 4 – Responsive Web Design