I am building an e-commerce website on bootstrap, but I am quite new to this world of web design (quite new on programing tbh), and I am trying to build a row with 5 colluns to display some products, but I tried a lot of things and I can't make the row with 5 cols without compromising the website responsiveness, any help?
<div class="container-fluid py-5 m-0">
<div class="container-fluid m-0">
<div class="row g-0 gx-5 align-items-end">
<div class="col-lg-6">
<div class="section-header text-start mb-5">
<span class="display-5 mb-3 fw-bolder">Os Nossos produtos</span>
</div>
</div>
<div class="col-lg-6 text-lg-end position-relative" style="bottom: 50px;">
<h5><a href="" class="mb-3" style="text-decoration: none;">View All <i
class="fa-solid fa-arrow-right"></i></a></h5>
</div>
</div>
<div class="tab-content">
<div id="tab-1" class="tab-pane p-0 active">
<div class="row g-0">
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_1.jpeg" alt="">
</div>
<div class="p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_2.jpeg" alt="">
</div>
<div class="p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_3.png" alt="">
</div>
<div class=" p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_1.jpeg" alt="">
</div>
<div class=" p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_2.jpeg" alt="">
</div>
<div class=" p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2.4 col-md-3 col-sm-4 col-6">
<div class="product-item">
<div class="position-relative bg-light overflow-hidden">
<img class="img-fluid w-100" src="img/imagensMiguel/produto_3.png" alt="">
</div>
<div class=" p-4">
<a class="d-block h5 mb-2" href="">Fresh Tomato</a>
<span class="text-primary me-1">$19.00</span>
<span class="text-body text-decoration-line-through">$29.00</span>
</div>
<div class="d-flex ">
<small class="w-50 text-center py-2">
<a class="text-body" href=""><i
class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can modify the number of cols in an row with classes
row-cols-<number of cols>do it as mobile ej.row-cols-md-<number of cols under md devices>So you can try this code:More info here: https://getbootstrap.com/docs/5.3/layout/grid/#row-columns