Imágenes en bootstrap 4
Las imagines en bootstrap 4 son muy importantes, ya que forman parte de cualquier proyecto web hoy en día, es por ello que debemos saber como utilizar las clases que nos permite este framework para poder trabjar con ellas.
- img-fluid: hace que la imagen se adapte al ancho del contenedor donde se encuentra, si esta fuera más ancha que el mismo.
- float-right: aliena la imagen a la derecha
- float-left: alinea la imagen a la izquierda (es la que viene por defecto)
- rounded: hace que las esquinas aparezcan redondeadas.
- rounded-circle: hace que la imagen aparezca redondeada, es decir, con un border-radius del 50%
- img-thumbnail: pone un marco a la imagen como si fuera una miniatura
Utilizando estas clases podemos generar algunos códigos como este:
<div class="row"> <div class="col-lg-4"> <img src="mezquita.jpg" class="img-fluid img-thumbnail"> </div> <div class="col-lg-4"> <img src="mezquita.jpg" class="img-fluid rounded"> </div> <div class="col-lg-4"> <img src="mezquita.jpg" class="img-fluid rounded-circle"> </div> </div>
Que nos da como resultado: