Bootstrap 4 – Figures

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 #818a91). Observe the following code:

<figure class="figure">
    <img src="/img/example.png" class="figure-img">
    <figcaption >Sample text.</figcaption></figure>

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 >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 >The Founder,
         <cite>Times Magazine</cite>
     </footer>
 </blockquote>

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>

Comments are closed.