Bootstrap 4 - Imágenes - Cómo crear galerías vistosas

Bootstrap 4 - Estilos para imágenes I - Cómo crear galerías vistosas

Vamos a ver como crear galerías de imágenes muy atractivas, con bordes redondeados, con forma de círculo, con leyenda debajo de la imagen...

En este capítulo os mostraré 3 estilos muy elegantes para vuestras galerías de imágenes.
En capítulos posteriores aprenderemos más cosas para que llegues a crear galerias totalmente profesionales y que puedas sacarles partido.

Imágenes en forma de círculo

Con este sencillo código (img-circle) en las imágenes obtenemos en cuestión de segundos un efecto maravilloso.

<img src="escaleras.jpg" class="img-circle" alt="Escaleras" width="300" height="280"> 

Imágenes con bordes redondeados

El mismo código, solo tienes que cambiar img-circle por img-rounded. Verás como sucede la magia.

<img src="bosque.jpg" class="img-rounded" alt="Bosque" width="300" height="300"> 

Imágenes con bordes blancos estilo thumbnail (miniatura)

Terminamos este primer capítulo del tratamiento de imágenes con Bootstrap 4 y lo hacemos con el estilo  img-thumbnail.
Este estilo es genial para una galería de fotos, ya que recuerda a las fotografías instantáneas y le da un toque muy profesional a la web.

<img src="lago.jpg" class="img-thumbnail" alt="Casa del lago" width="300" height="300"> 

Para ver el código completo con un ejemplo de uso de estos estilos, visita mi GitHub:

https://github.com/TheHittos/Bootstrap-4-Galleries