41 - Imágenes

Bootstrap define una serie de clases para aplicar al elemento HTML <img>:

  • rounded : Define las esquinas redondeadas en la imagen.
    Si accedemos al código del archivo bootstrap.css veremos que inicializa la propiedad border-radius con el valor de 0.25rem.
  • rounded-circle : Convierte la imagen en un círculo, para ello Bootstrap 4 inicializa la propiedad border-radius: 50%;
  • img-thumbnail : Define un recuadro y muestra la imagen cuando se carga la página en el navegador.
  • img-fluid : Permite escalar correctamente la imagen (Esto lo logra Bootstrap 4 definiendo la propiedad max-width: 100%; y height: auto;)
  • float-left : flota la imagen a la izquierda.
  • float-right : flota la imagen a la derecha.

Veamos una página que muestra unas imágenes aplicando sucesivamente las distintas clases disponibles en Bootstrap 4:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <img src="http://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="rounded">
    <hr>
    <img src="http://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="rounded-circle">
    <hr>
    <img src="http://www.tutorialesprogramacionya.com/cssya/foto1.jpg" class="img-fluid">    
    <hr>
    <img src="http://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="img-thumbnail">    
    <hr>
    <img src="http://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="float-left">
    <img src="http://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="float-right">    
    <hr>    
  </div>
</body>
</html>

Tenemos como resultado en el navegador:

img bootstrap 4

Ejecutar Ejemplo

Retornar