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 class="figure-caption">Sample text.</figcaption></figure>...