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.
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.
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:
