Figuras
Documentación y ejemplos para mostrar imágenes y texto relacionados con el componente de figure en Bootstrap.

En esta página
Cada vez que necesites mostrar una parte del contenido, como una imagen con un título opcional, considera usar <figure>
.
Utiliza las clases incluidas .figure
, .figure-img
y .figure-caption
para proporcionar algunos estilos básicos para los elementos HTML5 <figure>
y <figcaption>
. Las imágenes en las figuras no tienen un tamaño explícito, así que asegúrate de agregar la clase .img-fluid
a tu <img>
para que sea responsive.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">Un título para la imagen de arriba.</figcaption>
</figure>
Alinear el título de la figura es fácil con nuestras utilidades de texto.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">Un título para la imagen de arriba.</figcaption>
</figure>
Sass
Tal vez te interese
Variables
$figure-caption-font-size: $small-font-size;
$figure-caption-color: $gray-600;