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?

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