Bootstrap 5 ofrece una amplia variedad de clases y estilos predefinidos para darle estilo a las imágenes y mejorar la experiencia visual de los usuarios.
Con las clases de Bootstrap 5, puedes controlar fácilmente el tamaño, la forma, el borde y la posición de las imágenes, adaptándolas a las necesidades específicas de tu diseño. Además, Bootstrap 5 ofrece opciones para aplicar efectos de sombra, bordes redondeados y opacidad a las imágenes, lo que te permite crear un estilo único y profesional para tus proyectos.
Las imágenes responsivas son otro aspecto importante de Bootstrap 5, lo que significa que las imágenes se ajustarán automáticamente al tamaño de la pantalla del dispositivo en el que se visualicen, garantizando una experiencia visual óptima en diferentes dispositivos, desde teléfonos móviles hasta computadoras de escritorio.
En esta sección del tutorial de Bootstrap 5, aprenderás a utilizar las distintas clases disponibles para personalizar el aspecto y el comportamiento de las imágenes en tu sitio web. Desde el uso de clases de tamaño para controlar la escala de las imágenes hasta la aplicación de clases de posicionamiento para alinearlas correctamente.
10. Clases para dar estilo a las imágenes en Bootstrap 5
Veamos las clases más utilizadas para dar estilo a las imágenes en Bootstrap 5.
| Clase | Descripción |
|---|---|
.img-fluid | Hace que la imagen sea fluida, es decir, se ajusta al ancho del contenedor que la contiene sin desbordar. |
.rounded | Agrega bordes redondeados a la imagen. |
.rounded-circle | Hace que la imagen tenga forma de círculo, útil para fotos de perfil y avatares. |
.rounded-0 | Elimina los bordes redondeados de la imagen. |
.img-thumbnail | Agrega un estilo de marco con sombra a la imagen, creando un aspecto de miniatura. |
.float-start | Flota la imagen a la izquierda del texto o del contenedor. |
.float-end | Flota la imagen a la derecha del texto o del contenedor. |
.mx-auto | Centra horizontalmente la imagen en su contenedor. |
.my-auto | Centra verticalmente la imagen en su contenedor. |
.d-block | Convierte la imagen en un bloque para que ocupe todo el ancho del contenedor y respete el espacio vertical. |
.d-inline | Hace que la imagen se muestre en línea con el texto, sin ocupar todo el ancho del contenedor. |
.d-inline-block | Hace que la imagen se muestre en línea con el texto y permita ajustar su tamaño y margen. |
Hay que tener en cuenta que estas son solo algunas de las clases disponibles para trabajar con imágenes en Bootstrap 5. Puedes combinarlas y personalizarlas según tus necesidades.
10.1. Imagen responsive
Bootstrap nos ofrece la clase .img-fluid para que las imágenes se adapten correctamente a los distintos dispositivos. Estas imágenes cuentan con un max-width: 100%; y un height:auto;. Ejemplo:
< img src="eniun.jpg" class="img-fluid" alt="Eniun">
10.2. Imagen con esquinas redondeadas
La clase .rounded agrega esquinas redondeadas a una imagen. Además se hay otras clases para ajustar el redondeo de las esquinas. Por ejemplo eligiendo qué esquina se desea redondear o eligiendo una clase que hace la imagen en forma de círculo. Ejemplo:
<img src="eniun.jpg" class="rounded" alt="Eniun"> <img src="eniun.jpg" class="rounded-top" alt="Eniun"> <img src="eniun.jpg" class="rounded-end" alt="Eniun"> <img src="eniun.jpg" class="rounded-bottom" alt="Eniun"> <img src="eniun.jpg" class="rounded-start" alt="Eniun"> <img src="eniun.jpg" class="rounded-circle" alt="Eniun">
10.3. Imagen tipo miniatura
La clase .img-thumbnail da forma de miniatura a la imagen y le asigna un borde redondeado de 1 píxel. Ejemplo:
< img src="eniun.jpg" class="img-fluid" alt="Eniun">
10.4. Alineación de imágenes
Desplace una imagen hacia la derecha con la clase .float-end o hacia la izquierda con .float-start. Ejemplo:
<img src="eniun.jpg" class="float-end" alt="Eniun"> <img src="eniun.jpg" class="float-start" alt="Eniun">
Además, a las imágenes se les puede aplicar las clases de los bordes.
Ejemplos
En la siguiente sección del tutorial veremos las clases para dar estilo a los botones en Bootstrap 5.