Como definir una figura con Bootstrap 4

En este artículo vas a averiguar como y cuando definir una figura, darle formato y algunos detalles más.

También vas a ver como mejorar el aspecto de estas figuras utilizando Bootstrap.

El elemento HTML <figure> representa contenido independiente, a menudo con un título, asociado a un texto principal.

Por lo general, las figuras se suelen utilizar para incluir una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se puede hacer referencia en un texto principal.

Dentro del elemento <figure> puedes incluir la etiqueta <figcaption> para agregar un título asociado a la figura.

Con Bootstrap puedes dar un poco de formato a estos elementos para que se vean más bonitos.

Cada vez que necesites mostrar un contenido, como una imagen con un título opcional, es buena idea utilizar el elemento <figure>.

En Bootstrap puedes utilizar las clases definidas .figure , .figure-img y .figure-caption para proporcionar algunos estilos preparados para los elementos <figure> y <figcaption>. También tienes la posibilidad de darle tu propio estilo, como cualquier otro elemento HTML.

Fíjate en la siguiente estructura:

<div class="row">
    <div class="col-lg-12">
        <figure class="figure">
            <img src="https://picsum.photos/id/679/1200/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

Donde estoy definiendo una nueva fila de doce columnas para mostrar una figura con su imagen y título a la izquierda. El resultado sería como la imagen siguiente:

Indicando la clase «img-fluid» a la imagen, conseguimos que se adapte a todos los dispositivos de forma fácil y agradable.

Indicando la clase «rounded» a la imagen, conseguimos que los bordes sean redondeados.

El elemento <figure> también se puede utilizar para mostrar elementos con imagen y título uno al lado del otro. Por ejemplo, podemos mostrar 3 figuras utilizando la grilla de Bootstrap:

<div class="row"> 
    <div class="col-lg-4">
        <figure class="figure">
            <img src="https://picsum.photos/id/680/400/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
        </figure>
    </div>
    <div class="col-lg-4">
        <figure class="figure">
            <img src="https://picsum.photos/id/681/400/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
        </figure>
    </div>
    <div class="col-lg-4">
        <figure class="figure">
            <img src="https://picsum.photos/id/682/400/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

Obteniendo como resultado:

En este caso, estoy mostrando 3 figuras con su imagen y título alineado a la derecha. El título también se puede alinear fácilmente al centro utilizando la clase «text-center» que tiene Bootstrap ya definida.

En la mayoría de los casos, las figuras se suelen utilizar para acompañar un texto principal. Fíjate en la siguiente estructura:

<div class="row"> 
    <div class="col-lg-8">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="col-lg-4">
        <figure class="figure">
            <img src="https://picsum.photos/id/683/400/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

Al definir esta estructura, estoy deseando mostrar un texto principal a la izquierda ocupando 8 columnas y la figura situada a la derecha ocupando 4 columnas.

El resultado sería como lo siguiente:

Otro detalle interesante que se puede hacer con el elemento <figure> y, que seguramente habrás visto por ahí, es posicionar su <figcaption> en posición absoluta por encima de la imagen para conseguir algo como lo siguiente:

La estructura para conseguir esta figura es la siguiente:

<div class="row">
    <div class="col-lg-12">
        <figure class="figure figure-container">
            <img src="https://picsum.photos/id/679/1200/300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

A nivel de estructura es lo mismo. Una pequeña diferencia es que al elemento <figure> le he agregado una clase «figure-container» que en la hoja de estilos CSS he definido con posición relativa y al título con posición absoluta estableciendo su posición dentro de la imagen con los atributos top y left.

.figure-container {
    position: relative;
}
 
.figure-container .figure-caption {
    position: absolute;
    top: 40%;
    left: 5%;
    color: #ffffff;
    font-size: 28px;
}

Conclusión

El elemento <figure> representa una pieza de documento autocontenido que se utiliza, habitualmente, para encerrar imágenes, gráficos, tablas de referencia, vídeos, poemas, fragmentos de código, etc. Esto significa que, no está definido para usarlo solamente con imágenes, puedes agregar dentro del <figure> cualquier elemento HTML.

De forma opcional, las figuras pueden ser acompañadas por una leyenda o título que puede usarse para hacer una referencia al fragmento desde alguna parte del documento.

Este tipo de elementos, al ser autocontenido, significa que tiene cierto grado de independencia del contenido principal. También se pueden utilizar como un elemento totalmente independiente.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Como definir una figura con Bootstrap 4”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre