bootstrap row-cols-sm-1 does not work with cards. Two cards appear on cell screen when it should be 1

Issue

Here is my code

<div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1 g-4">
  <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
           <div class="card-body">
           <h5 class="card-title">...</h5>
            <p class="...</p>
           </div>
       </div> 
  </div>

As you can see row-cols-sm-1 is set to one, but when setting the view to a phone in Google Chrome’s dev tools, the page shows two cards per row when it should only be one. If I remove the sm-1 class and put md-1 then it will show one card per row, but I really want md to be set to two.

Solution

What your example

• <576px row-cols-1 one card for this size
• ≥576px row-cols-sm-1 one card for this size
• ≥768px rows-cols-md-2 two cards
• ≥992px row-cols-lg-3 three cards
• ≥1200px three cards

Here an example with use a class in each column. If you use a framework you will loop and write one simple class. col-md-6 col-lg-4

<div class="container">
    <div class="row ">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
        
    </div>
</div>

Answered By – akramgassem

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0