Bootstrap 4 - The class .col is not working propely

Question

The class .col-6 is not working propely, when below 575px screen size, the cards gets a weird aspect. How to fix it?

Click on Run code snippet->Full Page, and resize the screen to below 575px of width:

.divCard{
  float:left;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

    </div>
    
    <div class="col-12 col-lg-4" style="background-color: red"></div>
  </div> 
</div>

Cards don't have width set to 100%. Add w-100 class to cards and it should look good. If you want to see what is going on add borders to columns and you will know how the layout behaves ondifferent screen sizes. Edit: I just notices you nested columns inside columns. Columns need row as a container. — Jakub Muda, Nov 08 '18 at 04:30
this is exactly what I meant. You need to fix the layout too. `
` this column should contain `
` and all columns with cards should be placed in this row. It should fix the problem. — Jakub Muda, Nov 08 '18 at 05:33

Dhaval Jardosh · Answer 1 · 2018-11-08T05:44:03.097

Wrap the content of your class col-lg-8 inside of a row class.

As col-*-* have default margins which is causing the issue.

Please try the below code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
  </div>
</div>

Actually i can't remove this `
` because i need this to add a `div` on the side of the cards. And if i remove the class `card-group` the card lose the inline layout, i would need to remove the `col-lg-8` too. But as i said, i can't remove it. I updated my snippet. Please check it. — Sabrina, Nov 08 '18 at 05:13
Please check the edit @Sabrina, and let me know if that works. — Dhaval Jardosh, Nov 08 '18 at 05:39

Jakub Muda · Accepted Answer · 2021-01-31T11:37:00.477

I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.

According to bootstrap you need to have the following scheme in your layout. container → row → col → row → col and so on.

Your layout has container → row → col → col and i suppose this is the problem.

Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.

I hope this solves your problem.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">
      
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </div>

      </div>
    </div>
  </div>
</div>

run you example its not giving right results – Heemanshu Bhalla Jan 31 '21 at 07:16 — Heemanshu Bhalla, Jan 31 '21 at 07:16

Bootstrap 4 - The class .col is not working propely

2 Answers2