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”>© MyPhoto Inc.</p>
<p class=”text-muted”>Terms &Conditions</p>
<p class=”text-muted”>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>© MyPhoto Inc.</small></p
<p class=”text-muted”><small>Terms & Conditions</small></p>
<p class=”text-muted”><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>© MyPhoto Inc.</small>
</p>
<p class=”text-muted”>
<a href=”#”><small>Terms & Conditions</small></a>
</p>
<p class=”text-muted”>
<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;
}
}
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.