¿Cómo alinear imágenes en Bootstrap 4?

Posted on by Rudeus Greyrat

Sabemos que agregar imágenes a un sitio web lo hace más atractivo y presentable. A veces, necesitamos alinear las imágenes a la derecha o a la izquierda. La mayoría de las veces, colocamos una imagen en el centro. Con CSS tradicional, tuvimos que escribir un montón de código para realizar esta tarea específica. Bootstrap ofrece diferentes clases de imágenes para mejorar su apariencia y también para que respondan. Hacer que una imagen responda significa que debe escalar de acuerdo con su elemento principal. Es decir, el tamaño de la imagen no debe desbordar su elemento principal y crecerá y se reducirá de acuerdo con el cambio en el tamaño de su elemento principal sin perder su relación de aspecto. Usando Bootstrap 4, es fácil aplicar clases de arranque predefinidas para alinear las imágenes. En este artículo, aprenderemos a alinear imágenes en Bootstrap 4.

Sintaxis: 

  • Para imagen responsiva
<img src="image_source" class="img-fluid" ...>
  • Para alinear la imagen a la izquierda
<img src="image_source" class="float-left" ...>
  • Para alinear la imagen a la derecha
<img src="image_source" class="float-right" ...>
  • Para alinear la imagen al centro
<img src="image_source" class="mx-auto d-block" ...>

Acercarse: 

  • Coloque la imagen en la línea requerida dentro de la etiqueta <body> .
  • Envuelva el elemento de imagen en la clase .float-left para alinear hacia la izquierda, .float-right para alinear hacia la derecha.
  • Para alinear en el centro, necesitamos usar las clases de arranque .mx-auto y .d-block .
  • Para crear una imagen receptiva, podemos usar la clase .img-fluid dentro de la etiqueta <img> .

Seguiremos los siguientes pasos para alinear las imágenes:

Paso 1: Incluya Bootstrap CSS en la sección HTML <head> para cargar la hoja de estilo.

<enlace rel=”hoja de estilo” href=
“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”
integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm”
origen cruzado=”anónimo” >

Agregue el complemento y la dependencia de JavaScript de Bootstrap.

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”
integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN”
crossorigin=”anónimo”>
</script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”
integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q”
crossorigin=”anónimo ”>
</script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”
integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl”
crossorigin=”anónimo ”>
</script>

Paso 2: podemos copiar directamente la plantilla de inicio de Bootstrap como se indica en la documentación oficial de Bootstrap .

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, 
                     initial-scale=1, 
                     shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"/>
  
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous">
    </script>
    <script
      src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous">
    </script>
    <script
      src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous">
    </script>
  </body>
</html>

Paso 3: envuelva el elemento de imagen dentro de las clases .float-left, .float-right o .mx-auto y .d-block para alinearlo en la posición deseada. 

Los siguientes ejemplos demostrarán el concepto de alineación de la imagen.

Ejemplo 1: alineación de la imagen a la izquierda

Podemos alinear o hacer flotar una imagen a la izquierda con la ayuda de la clase .float-left de bootstrap .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1, 
                   shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous" />
  
    <title>Hello, world!</title>
</head>
  
<body style="background-color: rgb(15, 57, 33)">
    <h1 style="color: white">Image at the Left!</h1>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" 
         class="float-left" 
         alt="GeeksforGeeks" 
         width="300" 
         height="230" />
</body>
  
</html>

Producción:

Ejemplo 2: alineación de la imagen a la derecha

Podemos alinear o hacer flotar una imagen a la derecha con la ayuda de la clase .float-right de bootstrap .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous" />
  
    <title>Hello, world!</title>
</head>
  
<body style="background-color: rgb(15, 57, 33)">
    <h1 style="color: white">Image at the Right!</h1>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" 
         class="float-right" 
         alt="GeeksforGeeks" 
         width="300" 
         height="230" />
</body>
  
</html>

Producción:

Ejemplo 3: Alinear la imagen en el centro

Podemos alinear una imagen en el centro con la ayuda de las clases .mx-auto (que en CSS significa margin: auto ) y .d-block (que en CSS significa display: block ) de bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous" />
  
    <title>Hello, world!</title>
</head>
  
<body style="background-color: rgb(15, 57, 33)">
    <h1 style="color: white">Image at the Center!</h1>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" 
         class="mx-auto d-block" 
         alt="GeeksforGeeks" 
         width="300" 
         height="230" />
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por rijushree100guha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *