Even though I followed the grid structure from Bootstrap reference, my code doesn't seem to have horizontal gaps, only vertical ones. I know it's not about the version because when I copy and paste the sample code into my HTML file, that code still shows the gap while mine doesn't. Can someone please help me? 😞
<div class="container">
<div class="row g-3">
<div class="item col-lg-3 col-sm-6 col-12">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<div class="btn btn-dark">Add To Cart</div>
</div>
<div class="item col-lg-3 col-sm-6 col-12">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<div class="btn btn-dark">Add To Cart</div>
</div>
<div class="item col-lg-3 col-sm-6 col-12">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<div class="btn btn-dark">Add To Cart</div>
</div>
<div class="item col-lg-3 col-sm-6 col-12">
<img src="./images/1.png" class="img-fluid" alt="">
<div class="name">Chair 01</div>
<div class="price">$200</div>
<div class="btn btn-dark">Add To Cart</div>
</div>
</div>
</div>
This is what the outcome looks like check out this image for more details