CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Shahzaib Naseer
Shahzaib Naseer

Reputation: 80

Bootstrap 4 Cards in Columns Overlapping

I am making a product display page using Bootstrap 4. In full size the columns are displayed alright but when these columns overlaps each other when displayed in any mobile size screen. I have tried many things including changing the display to inline-block.

The code is mentioned below please help me!..

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <!-- row 2-->
  <div class="row border ">
    <!--Col 1-->
    <div class="col-sm-3">
      <div class="card mh-100 " style="width: 18rem; height: 31rem;">
        <img class="card-img-top " style="" src="C:\Users\acer\OneDrive\Desktop\sufi.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top " src="C:\Users\acer\OneDrive\Desktop\ear buds.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" style="height:15 rem" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" style="height:15 rem" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
  <!--Row-3-->
  <div class="row border topM">
    <!--Col1-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\sufi.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\ear buds.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 1118

Answers (1)

focus.style
focus.style

Reputation: 6750

  1. Don't use fixed width like width: 18rem; inside of col-x elements, it may tear the parent.
  2. You have several mistakes like style="height:15 rem". The space between 15 and rem will cause the error and this setting will be ignored.
  3. I have added to your cols col-lg-3 col-md-4 col-sm-6 so ti will be more responsive during the screen resizing. More about bootstrap grid system
  4. Bootstrap padding classes like ml-5 can be used with breakpoints, like ml-md-5 ml-2 to improve it's view on responsiveness. More about bootstrap spacing.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <!-- row 2-->
  <div class="row border">
    <!--Col 1-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><b>Price:</b>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><b>Price:</b>200Rs</p>
          <p class="card-text demo">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" style="height:15 rem" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
  <!--Row-3-->
  <div class="row border topM">
    <!--Col1-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions