Bootstrap - Figures

Ethan D. -

Creating a Figure

To create a figure in Bootstrap, use the <figure> element. This element represents self-contained content, usually an image, illustration, diagram, or code snippet. The basic structure of a figure in Bootstrap looks like this:

Example: Basic Figure Structure

<figure>
  <img src="path/to/image.jpg" alt="Description of the image">
</figure>

To add an image to a figure, use the <img> element inside the <figure> element. The src attribute specifies the path or URL of the image file, while the alt attribute provides alternative text for the image, which is important for accessibility and search engine optimization.

When adding an image to a figure, you can control its size and alignment using Bootstrap classes. To specify the size of the image, use the img-fluid class, which makes the image responsive and adjusts its size to fit within the parent container.

Example: Responsive Image

<figure>
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
</figure>

To align the image within the figure, use the text-center class on the <figure> element to center the image horizontally.

Example: Centered Image

<figure class="text-center">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
</figure>

You can also use the float-start or float-end classes to align the image to the left or right, respectively, allowing text to wrap around it.

Example: Left-aligned Image

<figure class="float-start">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
</figure>

By using the <figure> element and applying Bootstrap classes, you can create and style figures in your web pages, making them visually appealing and responsive.

Figure Captions

To add a caption to a figure in Bootstrap, use the <figcaption> element inside the <figure> element. The <figcaption> element provides a way to describe or explain the content of the figure.

Example: Figure with a caption

<figure>
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This is a caption for the figure.</figcaption>
</figure>

You can style the appearance of the figure caption using Bootstrap classes or custom CSS. By default, the caption is displayed below the image. To change the font size, color, or other properties of the caption, you can apply classes or use inline styles.

Example: Styled figure caption

<figure>
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption class="text-muted fs-6">This is a styled caption for the figure.</figcaption>
</figure>

The text-muted class is used to give the caption a muted color, and the fs-6 class sets the font size to a smaller value.

To align the figure caption, you can use the text-center, text-start, or text-end classes on the <figure> element. These classes control the horizontal alignment of both the image and the caption within the figure.

Example: Centered figure caption

<figure class="text-center">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This caption is centered along with the image.</figcaption>
</figure>

Figure Sizes

In Bootstrap, you can control the size of figures by applying predefined size classes or creating custom size classes. This allows you to make figures fit well within your layout and keep consistency throughout your web page.

Bootstrap provides a set of predefined size classes that you can use to quickly set the width of figures. These classes are based on percentage values and can be applied to the <figure> element or directly to the <img> element inside the figure.

Example: Predefined Size Classes

<figure class="w-25">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a width of 25%.</figcaption>
</figure>

<figure class="w-50">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a width of 50%.</figcaption>
</figure>

<figure class="w-75">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a width of 75%.</figcaption>
</figure>

The predefined size classes are w-25, w-50, w-75, and w-100, representing widths of 25%, 50%, 75%, and 100%, respectively. These classes automatically adjust the figure's width while keeping the aspect ratio of the image intact.

If you need more control over the size of figures, you can create custom size classes using CSS. By defining your own classes with specific width or max-width properties, you can change the figure sizes to your specific design requirements.

Example: Custom Size Classes

<style>
  .figure-small {
    max-width: 200px;
  }
  .figure-medium {
    max-width: 400px;
  }
  .figure-large {
    max-width: 600px;
  }
</style>

<figure class="figure-small">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a small custom size.</figcaption>
</figure>

<figure class="figure-medium">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a medium custom size.</figcaption>
</figure>

<figure class="figure-large">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure has a large custom size.</figcaption>
</figure>

We define three custom size classes: figure-small, figure-medium, and figure-large. Each class has a specific max-width property that limits the maximum width of the figure. You can adjust these values according to your needs.

By applying these custom size classes to the <figure> element, you can control the size of figures precisely. The img-fluid class is still used on the <img> element to make the image responsive within the figure container.

Remember to choose figure sizes that are right for your content and layout, and test your web page on different devices to make sure the figures look and work as expected.

Figure Alignment

Bootstrap provides classes to align figures horizontally and vertically within their parent container. You can use these classes to position figures to your layout needs and have a nice arrangement.

To align figures horizontally, you can use the text-start, text-center, or text-end classes on the <figure> element. These classes control the horizontal alignment of both the image and the caption within the figure.

Horizontal Alignment Examples

<figure class="text-start">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure is aligned to the left.</figcaption>
</figure>

<figure class="text-center">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure is centered horizontally.</figcaption>
</figure>

<figure class="text-end">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure is aligned to the right.</figcaption>
</figure>

The text-start class aligns the figure to the left, the text-center class centers the figure horizontally, and the text-end class aligns the figure to the right.

To align figures vertically, you can use the align-items-start, align-items-center, or align-items-end classes on the parent container of the <figure> element. These classes control the vertical alignment of the figure within its parent.

Vertical Alignment Examples

<div class="d-flex align-items-start">
  <figure>
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
    <figcaption>This figure is aligned to the top.</figcaption>
  </figure>
</div>

<div class="d-flex align-items-center">
  <figure>
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
    <figcaption>This figure is vertically centered.</figcaption>
  </figure>
</div>

<div class="d-flex align-items-end">
  <figure>
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
    <figcaption>This figure is aligned to the bottom.</figcaption>
  </figure>
</div>

The parent container is set to a flex container using the d-flex class, and the vertical alignment is controlled by the align-items-* classes. The align-items-start class aligns the figure to the top, the align-items-center class vertically centers the figure, and the align-items-end class aligns the figure to the bottom.

You can combine horizontal and vertical alignment classes to position figures precisely within their parent container. This is useful when you have multiple figures side by side or want to create a specific layout.

Combined Alignment Example

<div class="d-flex align-items-center">
  <figure class="text-end">
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
    <figcaption>This figure is aligned to the right and vertically centered.</figcaption>
  </figure>
  <figure class="text-start">
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
    <figcaption>This figure is aligned to the left and vertically centered.</figcaption>
  </figure>
</div>

By using Bootstrap's alignment classes, you can position figures flexibly and create nice layouts that fit well with your content.

Responsive Figures

Making figures responsive is important to provide a good user experience across different devices and screen sizes. Bootstrap offers a simple way to make figures responsive using the .img-fluid class.

To make a figure responsive, add the .img-fluid class to the <img> element inside the <figure> element. This class applies max-width: 100%; and height: auto; to the image, allowing it to scale down proportionally when the parent container is smaller than the image's intrinsic size.

Responsive HTML Example

<figure>
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure is responsive and will scale down proportionally.</figcaption>
</figure>

By using the .img-fluid class, the image will automatically adjust its size to fit within the width of its parent container. This is useful when you have figures in responsive layouts or when you want the figures to adapt to different screen sizes.

When working with responsive figures, it's important to consider the aspect ratio of the images. If the images have different aspect ratios, they may appear distorted or inconsistent when scaled down.

To handle different aspect ratios, you can use the .ratio class in combination with the .ratio-* classes provided by Bootstrap. These classes allow you to maintain a specific aspect ratio for the figure, regardless of the actual dimensions of the image.

Aspect Ratio Example

<figure class="ratio ratio-16x9">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <figcaption>This figure maintains a 16:9 aspect ratio.</figcaption>
</figure>

Bootstrap provides several predefined aspect ratio classes, such as .ratio-1x1, .ratio-4x3, and .ratio-21x9, which you can use based on your image's aspect ratio.

By using the .ratio and .ratio-* classes, you can make sure that your responsive figures keep their intended aspect ratios, no matter the size of the parent container or the actual dimensions of the images.

Keep in mind that when using responsive figures, it's still important to optimize your images for web performance. Use appropriate image formats, compress your images, and make use of lazy loading for a faster page load time.

Figures with Overlays

Bootstrap lets you create figures with overlays, which are useful for adding extra information or interactive elements on top of an image. Overlays can contain text, icons, or any other HTML content, and they can be styled to fit your design needs.

To create a figure with an overlay, you can use the <figure> element and add a container element inside it to hold the overlay content. The overlay container is usually positioned absolutely within the figure to cover the entire image.

Example: Basic figure with overlay

<figure class="position-relative">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
    <h3 class="text-white">Overlay Text</h3>
  </div>
</figure>

The <figure> element has the position-relative class to establish a positioning context for the overlay container. The <img> element displays the image as usual.

The overlay container is created using a <div> element with the position-absolute class to position it absolutely within the figure. The top-0, start-0, w-100, and h-100 classes are used to stretch the overlay container to cover the entire figure.

Inside the overlay container, you can add any content you want, such as text or icons. An <h3> element is used to display some text. The text-white class is applied to make the text color white for better visibility against the image.

You can style the overlay container and its content using additional classes or custom CSS.

Example: Styled overlay container

<figure class="position-relative">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50 p-3">
    <h3 class="text-white">Overlay with Styled Background</h3>
  </div>
</figure>

The overlay container has additional classes to style its appearance. The bg-dark class sets a dark background color, and the bg-opacity-50 class sets the opacity of the background to 50%. The p-3 class adds padding to the overlay container.

You can also add icons or other elements to the overlay to provide visual cues or interact with the figure.

Example: Overlay with an icon

<figure class="position-relative">
  <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
    <i class="bi bi-play-circle text-white fs-1"></i>
  </div>
</figure>

An icon from the Bootstrap Icons library is used within the overlay container. The bi bi-play-circle class displays a play circle icon, and the text-white and fs-1 classes style the icon's color and size.

Figures with overlays provide a way to add extra information or interactivity to your images, making them more engaging and informative for your users.

Figures in Cards

Bootstrap cards are containers that allow you to display various types of content, including figures. By combining figures with card components, you can create visually appealing and organized layouts.

To use a figure within a Bootstrap card, place the <figure> element inside the card's body or any other section of the card.

Example: Figure in Card Top

<div class="card">
  <figure class="card-img-top">
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  </figure>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a card with a figure at the top.</p>
  </div>
</div>

The <figure> element is placed inside the card and given the card-img-top class, which positions the figure at the top of the card. The <img> element inside the figure displays the image, and the img-fluid class makes the image responsive.

The card's content is added within the card-body section, which can include a title, text, and other elements as needed.

You can also combine figures with other card content, such as text, buttons, or lists, to create more complex layouts.

Example: Figure in Card with Rows

<div class="card">
  <div class="row g-0">
    <div class="col-md-4">
      <figure class="card-img-start">
        <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
      </figure>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a card with a figure on the left and content on the right.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

The card is divided into two columns using the row and col-* classes. The figure is placed in the first column with the card-img-start class, aligning it to the left side of the card. The card's content, including a title, text, and a button, is placed in the second column within the card-body.

When using figures in cards, you can change the figure size and alignment to fit your layout needs. Use the sizing classes (w-* or h-*) to control the figure's dimensions and the alignment classes (text-start, text-center, or text-end) to position the figure within the card.

Example: Centered Figure in Card

<div class="card">
  <figure class="card-img-top text-center w-50 mx-auto">
    <img src="path/to/image.jpg" alt="Description of the image" class="img-fluid">
  </figure>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a card with a centered figure that has a width of 50%.</p>
  </div>
</div>

The figure is centered within the card using the text-center class, and its width is set to 50% using the w-50 class. The mx-auto class is used to horizontally center the figure within the card.