Imágenes en Bootstrap 4

1. Imagen responsive

Bootstrap 4 nos ofrece la clase .img-fluid para que las imágenes se adapten correctamente a los distintos dispositivos.

Ejemplo:

< img src="eniun.jpg" class="img-fluid" alt="Eniun">

2. Imagen con esquinas redondeadas

La clase .rounded agrega esquinas redondeadas a una imagen:

Ejemplo:

<img src="eniun.jpg" class="rounded" alt="Eniun">

3. Imagen con forma de círculo

La clase .rounded-circle da forma de círculo a la imagen:

Ejemplo:

<img src="eniun.jpg" class="rounded-circle" alt="Eniun">

4. Imagen tipo miniatura

La clase .img-thumbnail da forma de miniatura a la imagen:

Ejemplo:

<img src="eniun.jpg" class="img-thumbnail" alt="Eniun">

5. Alineación de imágenes

Desplace una imagen hacia la derecha con la clase .float-right o hacia la izquierda con .float-left:

Ejemplo:

<img src="eniun.jpg" class="float-left" alt="Eniun">
<img src="eniun.jpg" class="float-right" alt="Eniun">

Ejemplo

default

Comprueba tu aprendizaje