How to use grid for images in bootstrap card ?
Last Updated :
12 Jul, 2025
Images can be added to the
Bootstrap card by simply using an
img tag. But we cannot use the same method directly to place an Image Grid into the Bootstrap Card as it will be lead to a misaligned design. Therefore, to get a per-flow to place image Grid into Bootstrap Card. The perfectly aligned grid we need to add some CSS to our HTML code.
Approach: First set the value
display: grid; of the div wrapping all the images to transform it into to a grid layout. Then set the value
grid-template-columns: auto; of the grid container to specify the number of columns in the grid layout. Now set the value
width: 100%; of the image to get a perfect grid.
Below examples illustrate the above approach:
Example 1: Image grid with 2 columns i.e. 2x2 Image grid.
html
<!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>
Output:
Example 2: Image grid with 3 columns i.e. 3x3 Image grid.
html
<!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>
Output:
Similar Reads
How to use image overlay correctly with Bootstrap ? In this article, we will be learning how to use image overlay correctly with Bootstrap. But before that, first, we need to know what is an Image Overlay. Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be
2 min read
How to display multiple horizontal images in Bootstrap card ? Pre-requisite: Bootstrap Cards Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizi
2 min read
How to display multiple horizontal images in Bootstrap card ? Pre-requisite: Bootstrap Cards Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizi
2 min read
How to Create Cards in Bootstrap ? Bootstrap cards, use the .card class. Customize content with headings, paragraphs, images, and buttons. Utilize contextual background colors and additional classes for styling and alignment. Cards offer flexible content containers with options for headers, footers, and powerful display settings.In s
3 min read
How to align images in Bootstrap 4 ? We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center. With traditional CSS, we had to write a bunch of code to accomplish this specific task. Boot
4 min read
How to Apply Bootstrap Grid for Inline Elements ? The Bootstrap Grid System is a flexible and responsive layout system that allows developers to create complex and responsive web layouts. The grid system uses a series of classes and CSS styles to create rows and columns. The grid system is built using the flexbox layout model, which allows elements
4 min read