Las imágenes se pueden agregar a la tarjeta Bootstrap simplemente usando una etiqueta img . Pero no podemos usar el mismo método directamente para colocar una cuadrícula de imagen en la tarjeta Bootstrap, ya que conducirá a un diseño desalineado. Por lo tanto, para obtener un flujo por flujo para colocar la cuadrícula de imágenes en la tarjeta Bootstrap. La cuadrícula perfectamente alineada que necesitamos para agregar algo de CSS a nuestro código HTML.
Enfoque: primero configure la visualización del valor: cuadrícula; del div que envuelve todas las imágenes para transformarlo en un diseño de cuadrícula. Luego establezca el valor grid-template-columns: auto; del contenedor de cuadrícula para especificar el número de columnas en el diseño de cuadrícula. Ahora establezca el ancho del valor: 100%; de la imagen para obtener una cuadrícula perfecta.
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo 1: cuadrícula de imágenes con 2 columnas, es decir, cuadrícula de imágenes de 2 × 2.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</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.4.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>
.card {
width: 20rem;
margin: 2rem;
}
.image-grid-container {
display: grid;
/* For 2 columns */
grid-template-columns: auto auto;
}
img {
width: 100%;
}
</style>
</body>
<body>
<div class="container">
<div class="card">
<div class="image-grid-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="card-body">
<h4 class="card-title">Developer Guy</h4>
<p class="card-text">
Developer Guy love to develop
front-end and back-end
</p>
<a href="#" class="btn btn-primary">
See Profile
</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: cuadrícula de imágenes con 3 columnas, es decir, cuadrícula de imágenes de 3 × 3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Cards</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>
.card {
width: 20rem;
margin: 2rem;
}
.image-grid-container {
display: grid;
/* For 3 columns */
grid-template-columns: auto auto auto;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="image-grid-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="card-body">
<h4 class="card-title">
Developer Guy
</h4>
<p class="card-text">
Developer Guy love to develop
front-end and back-end
</p>
<a href="#" class="btn btn-primary">
See Profile
</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shruti10gandotra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA