Bootstrap 4 - The class .col is not working propely [duplicate] - css

Question

This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
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>

Answer 1

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>

Answer 2

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>