Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Cifras

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

En esta página

Cada vez que necesite mostrar una parte del contenido, como una imagen con un título opcional, considere usar un archivo <figure>.

Utilice las clases y incluidas para proporcionar algunos estilos básicos para .figureHTML5 .figure-imgy elementos . Las imágenes en las figuras no tienen un tamaño explícito, así que asegúrese de agregar la clase a su para que responda..figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
Un título para la imagen de arriba.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Alinear la leyenda de la figura es fácil con nuestras utilidades de texto .

Placeholder 400x300
Un título para la imagen de arriba.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Hablar con descaro a

Variables

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;