Figures

Documentation and examples for displaying related images and text with the figure component in Bootstrap.

Anytime you need to display a piece of content—like an image with an optional caption, consider using a DITA <fig> element. Bootstrap CSS classes @class="figure", @class="figure-img", and @class="figure-caption" are automatically included to the output to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

Example

By default <figure> elements are styled as shown:

Figure 1. A caption for the image.
<fig>
  <title>A caption for the image.</title>
  <image href="..."/>
</fig>

Aligning text

The figure’s caption can be aligned using the Bootstrap text utilities.

Figure 2. A caption for the image.
<fig>
  <title outputclass="text-end">A caption for the image.</title>
  <image href="..."/>
</fig>

Adding borders

Use the DITA @frame attribute to add borders to a <fig>.

frame="all"
Figure 3. All Borders

frame="topbot"
Figure 4. Top and Bottom Borders

frame="sides"
Figure 5. Side Borders

frame="top"
Figure 6. Top Border only

frame="bottom"
Figure 7. Bottom Border Only
<fig frame="all">
  ...
</fig>
<fig frame="topbot">
  ...
</fig>
<fig frame="sides">
  ...
</fig>
<fig frame="top">
  ...
</fig>
<fig frame="bottom">
  ...
</fig>