If one requires just a figure on its own, and no media context, then Bootstrap’s figure classes should be used. Although they do not fit into the current context of MyPhoto, Bootstrap’s figure styling is a commonly used and important feature. As such, it is worth explaining the three classes that are to be used when creating a figure. The figure class sets the element’s display to inline-block. This forces the element to behave just like inline elements but also allows it to have a set width and height. The figure-img class should be applied to img elements within the figure element, adjusting their bottom margin and line height. Lastly, the figure-caption class is used to denote captions and adjusts the font size (setting it to 90%) and the font color (setting it to #818a9l). Observe the following code:
<figure class=”figure”>
<img src=”/img/example.png” class=”figure-img”>
<figcaption class=”figure-caption”>Sample text.</figcaption></figure>
1. Quotes
There will be occasions on which you may want to display a quote or citation on your site. As this requirement is a common scenario, Bootstrap developers offer the blockquote class for displaying quotes. The style rule for this class is not very complex. It merely adjusts the font size to 1.25 rem and sets the bottom margin to 1 rem. Let’s go ahead and apply this class to an important motivational quote by one of the founders of MyPhoto that underpins the very foundations of the company (refer to figure 4.23):
<blockquote class=”blockquote”>
<p>I am very motivated today.</p>
footer class=”blockquote-footer”>The Founder,
<cite>Times Magazine</cite>
</footer>
</blockquote>
Note how we not only display the quote itself but also provide a source using the optional blockquote-footer class. Bootstrap defines this class as follows:
.blockquote-footer {
display: block;
font-size: 80%;
color: #868e96;
}
.blockquote-footer::before {
content: “\2014 \00A0”;
}
Figure 4.24: Using Bootstrap block quotes to cite the MyPhoto founder (example10.html)
Instead of a left-hand border and left alignment, we can apply a right-hand border and align the source to the right using the text-right class (similarly, the text can be centered using text-center):
<blockquote class=”blockquote text-right”>
<p>I am very motivated today.</p>
footer class=”blockquote-footer”>The Founder,
<cite>Times Magazine</cite>
</footer>
</blockquote>
2. Abbreviations
Just as with Bootstrap 3, Bootstrap 4 styles HTML’s built-in abbr tag, which gives developers the ability to denote abbreviations. Denoting a piece of text as being an abbreviation will result in a small, dotted line being drawn underneath the text. As the user hovers over the text, the mouse pointer will change into a question mark. By setting the title attribute, a tool tip will appear with the full title attribute’s text content:
<abbr title=”My abbreviation”>ABBR</abbr>
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.