¿Cómo especificar la longitud y el ancho del sistema de imagen de cuadrícula cuadrada en Bootstrap?

La longitud y el ancho de la imagen de Cuadrícula cuadrada se pueden especificar mediante el método tradicional de CSS que se puede incorporar fácilmente en nuestro código HTML con una etiqueta de estilo o usando una etiqueta de enlace. Cuando se trata de Bootstrap, proporciona una forma mucho más fácil y efectiva de realizar la misma tarea con menos esfuerzo. Para especificar la longitud y el ancho de la imagen de cuadrícula cuadrada en Bootstrap, necesita el concepto básico del sistema de cuadrícula Bootstrap .

Hay cinco clases en Bootstrap que cambian la longitud y el ancho con ese concepto básico, puede aumentar o disminuir fácilmente la longitud de cualquier imagen que esté dentro de la columna de la cuadrícula.

  • .columna-
  • .col-sm-
  • .col-md-
  • .col-lg-
  • .col-xl-

Ejemplo 1: aquí verá tres imágenes con el mismo ancho de cuadrícula, pero si la pantalla es más pequeña, la tercera cuadrícula cambiará de fila y se volverá más ancha que las otras dos.
Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Grid System</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
  
    <style>
        .col {
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
            </div>
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121155/03.png">
            </div>
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: Aquí verá tres anchos diferentes de una cuadrícula que contiene imágenes.
Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Grid System</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
          "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
       "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .col {
            text-align: center;
            border: 5px solid black;
        }
          
        div {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <br>
        <center>
            <div class="row">
                <div class="col-sm-3">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
                </div>
                <div class="col-sm-6">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710123529/GeeksforGeeksLogoHeader1.png">
                </div>
                <div class="col-sm-3">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
                </div>
            </div>
        </center>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Choco_Chips 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 *