Bootstrap Cards Not Following Column Rules

Question

I have this code containing a row of bootstrap template cards:

<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">

        <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>
    </div>

I would like the cards to display with 4/row on large screens, 2/row on medium screens, and 1/row on small screens. When I remove the margin (m-3 class) from each card, this works perfectly. However, with the margin added, one or more of the cards ends up getting bumped down to another row, like the image below. How can I have these set numbers of cards in each row, while still allowing the cards to be spaced out nicely?

Gagandeep Singh · Accepted Answer · 2020-06-10T03:07:35.140

1

When you add side margin to columns then the calculation of bootstrap row gets disturbed, now the row have to accommodate that extra margin also with the columns and since the width of row here is fixed then it will shift the last column to next line. You can achieve the same effect by using padding in an inner container instead of using margin on cols.

<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card w-100 inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

    </div>

But you can apply margin to cols from top and bottom, Hope it helps !

edited Jun 10 '20 at 03:07

answered Jun 08 '20 at 03:24

Gagandeep Singh

975
6
11

Adding padding to the inner container has the same effect on the card as adding padding to the cards themselves. i.e. the cards expand, but still don't have a gap between each card like I want them to. Any ideas what is wrong? – Catogram Jun 08 '20 at 14:38
Have you tried removing the class "card" from the current element and add it to the inner div ? like

if it is still not working, could you replicate your problem in a jsfiddle and share its link here, so that I can check what exactly is causing the issue. Thanks – Gagandeep Singh Jun 09 '20 at 03:15
I will try that soon and let you know. Thanks for the suggestions! – Catogram Jun 09 '20 at 04:24
That worked! Thank you! If you would add the card class to the inner div of your original answer, that would be great so that other people can see how the problem was solved. – Catogram Jun 09 '20 at 18:02
Glad to know that it worked ! I have also edited my original answer to the one which worked. Thanks. – Gagandeep Singh Jun 10 '20 at 03:08

Bootstrap Cards Not Following Column Rules

1 Answers1