How to Place Image Grid into Bootstrap Card

Question

I have a Bootstrap Card with a picture below. Instead of a single picture, I want to insert a picture grid. How would I conduct this? Trying to combine creates misaligned design with white space

Bootstrap Card Code:

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="Card image cap">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Grid Image Code:

<div class="grid-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-gap: 0em;
    padding: 0px;
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

Trying to combine creates misaligned design with white space:

<div class="card" style="width: 18rem;">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Using MVC Net Core

Other resources learning: Bootstrap cards not showing like in examples

nitin9nair · Answer 1 · 2019-06-29T09:22:12.217

0

Try this:

CSS

img {
  width: 49%;
}

Or its better to add custom CSS class to all images inside card and give its width: 49%

codepen working demo

edited Jun 29 '19 at 09:22

answered Jun 29 '19 at 09:14

nitin9nair

580
3
12

I am using mvc core, not working here, how does 49% make sense? seem like its tweaking margins, etc – Jun 29 '19 at 09:25
I am going to have a multitude of pictures, sizes, text, so looking for solution which works always – Jun 29 '19 at 09:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195736/discussion-between-nitin9nair-and-tom85morris). – nitin9nair Jun 29 '19 at 09:29

Paulie_D · Answer 2 · 2019-06-29T17:52:04.217

Change the columns widths from 100px to 1fr and it works regardless of the width of the .card

.card {
  width:18rem;
  background: pink;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

<div class="card">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

thanks, what is the grid-container margin auto property? I am looking through here, dont see it, https://developer.mozilla.org/en-US/docs/Glossary/Grid_Container, do you have any reference book? trying to learn, thanks — , Jun 29 '19 at 15:44
That's not necessary. it was left over from something i was testing. — Paulie_D, Jun 29 '19 at 17:52

score 0 · Accepted Answer · edited Jul 01 '19 at 06:18

This is your solution.

.card {
  width:18rem;
}

.grid-container {
    display: grid;
    margin:auto;
    grid-template-columns: auto auto; /* The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. */
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

<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>

<div class="card">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        Some quick example text to build on the card title and make up the bulk of the card's content.
    </div>
</div>

How to Place Image Grid into Bootstrap Card

3 Answers3