Bootstrap cards side by side responsive

This one is already in the Bootstrap documentation. But I think it takes a while to find out where. Here’s a detailed explanation of how you can create a row of Bootstrap 5 cards side by side with the same height.

Final output:

image for Bootstrap cards side by side demo
Card title

Some quick example text to build make up the bulk of the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content. Some more quick example text for the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to make up the bulk of the card’s content.


1. Let’s start with the basic Bootstrap grid structure which will give you equal-width columns. You can add or remove columns as per your requirements. I’m going with a set of 3.

<div class="container">
    <div class="row">
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
    </div>
</div>

Output:

Column 1
Column 2
Column 3

2. Add your cards to the columns.

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <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>
        </div>
        <div class="col">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some more quick example text for the card's content.</p>
                </div>
              </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to make up the bulk of the card's content.</p>
                </div>
              </div>
        </div>
    </div>
</div>

Output:

image for Bootstrap cards side by side demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content. Some more quick example text for the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to make up the bulk of the card’s content.

3. To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <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>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some more quick example text for the card's content.</p>
                </div>
              </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to make up the bulk of the card's content.</p>
                </div>
              </div>
        </div>
    </div>
</div>

OR

.card{
  height: 100%; 
}

Output:

image for Bootstrap cards side by side demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content. Some more quick example text for the card’s content.

image for Bootstrap cards side by side demo
Card title

Some quick example text to make up the bulk of the card’s content.

4. Using the Bootstrap class col, the columns will be adjusted as per screen size. But it might not look good on smaller screen devices. Like the image below or 2 cards in a row and 1 below.

Bootstrap 5 cards side by side same height on smaller screens

To avoid this, replace Bootstrap class col with col-sm to add a breakpoint so that on smaller screens the cards are stacked vertically.

Also, to add some space between cards, add the class gy-3 to the row which is used to add a vertical gutter.

<div class="container">
    <div class="row gy-3">
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <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>
        </div>
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some more quick example text for the card's content.</p>
                </div>
              </div>
        </div>
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to make up the bulk of the card's content.</p>
                </div>
              </div>
        </div>
    </div>
</div>

If you are using Bootstrap 4, you would have to use CSS instead, as it does not support the gutter classes introduced in Bootstrap 5.

.col-sm{
    margin-bottom: 1em;
}

Output:

image for Bootstrap cards side by side same height demo
Card title

Some quick example text to build make up the bulk of the card’s content.

image for Bootstrap cards side by side same height demo
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content. Some more quick example text for the card’s content.

image for Bootstrap cards side by side same height demo
Card title

Some quick example text to make up the bulk of the card’s content.


Final Output Code for Bootstrap 5 Cards Same Height:

HTML

<div class="container">
    <div class="row gy-4">
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title fw-bold">Card title</h5>
                    <p class="card-text">Some quick example text to build make up the bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title fw-bold">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some more quick example text for the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title fw-bold">Card title</h5>
                    <p class="card-text">Some quick example text to make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.card{
    box-shadow: 0 0 5px 0 rgba(22, 22, 26, .25);
}

Recently added:

4 6 votes
Article Rating
Subscribe
Notify of
guest
5 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Great
Great
1 month ago

Great Article. Works perfect!

janu
janu
2 months ago

Thank you it is working

Kaushal
Kaushal
4 months ago

It worked. Thank you so much.

Ibrahim Abboud
Ibrahim Abboud
5 months ago

You fixed my issue, thanks you v much

Nikos
Nikos
6 months ago

Very useful post. Thanks

YouTube
YouTube
WhatsApp
Pinterest
fb-share-icon
Instagram
5
0
Would love your thoughts, please comment.x
()
x