Search code examples
cssrow

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

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. picture of the cards on chrome

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>