Bootstrap 4 – Creating a footer

At the moment,  MyPhoto only contains a placeholder in place of a useful footer. Before  MyPhoto goes live, it will desperately need a footer that should contain at least three pieces of information:

  • A copyright notice
  • A link to your website’s terms and conditions
  • A link to your website’s About section

Let’s go ahead and modify our footer to include these three pieces of information:

<footer class="footer text">
    <p class="text-muted">&copy; MyPhoto Inc.</p>
    <p class="text-muted">Terms &amp;Conditions</p>
    <p >About Us</p>
</footer>

Now open  styles/myphoto.css and insert the following CSS:

footer p {
    display: inline;
}

So, what exactly did we just do? We inserted our copyright notice and some placeholder text for our Terms and Conditions and About link. We embedded each of these three texts inside a paragraph element and applied Bootstrap’s  text-muted class. The  text-muted class does precisely what its name implies—it attempts to mute anything containing text by setting the foreground color to  #868e96 (a very soft, light grey, defined in _variables.scss as $text-muted: $gray-600 !default;).

Figure 4.12: Our footer text: Copyright notice, Terms & Conditions, and About

Save and refresh (refer to figure 4.12). Our footer is already looking better; however, unfortunately, the text is somewhat obtrusive. Go ahead and make it smaller:

<footer class="footer">
    <p class="text-muted"><small>&copy; MyPhoto Inc.</small></p
    <p class="text-muted"><small>Terms &amp; Conditions</small></p>
    <p ><small>About Us</small></p>
</footer>

Now center the text by applying Bootstrap’s  text-center class. Applying this class will, as its name implies, center any text:

<footer class="footer text-center">
    <p class="text-muted">
        <small>&copy; MyPhoto Inc.</small>
    </p>
    <p class="text-muted">
        <a href="#"><small>Terms &amp; Conditions</small></a>
    </p>
    <p >
        <a href="#"><small>About Us</small></a>
    </p>
</footer>

Last but not least, we first space out the individual paragraphs by adding a left margin of  10 pixels to each paragraph and then adjust the foreground color of our footer’s links:

footer p {
    display: inline;
    margin-left: 10px;
}
footer a {
    color: inherit ;
}
Figure 4.13: Our completed footer (example07.html)

It is worth noting that, under the hood, Bootstrap’s text alignment classes are just wrappers for the CSS  text- align property—that is, the  text-center class is defined by one line only:  text-align: center !important;. Likewise,  text-right and  text-left are by defined using  text-align: right  !important and  text-align: left !important. Other sizes are defined through CSS media queries. For example, the  bootstrap.css file defines the text alignment classes for small viewports so that they only apply to viewports that are at least  576 pixels wide:

@media (min-width: 576px) {
 .text-sm-left {
     text-align: left !important;
 }
 .text-sm-right {
     text-align: right !important;
 }
 .text-sm-center {
     text-align: center !important;
 }
}

Comments are closed.