'Boostrap 5 - how to stack 6 cards in a row?
I was trying to make a 6 cards in the same row, but everytime I am adding the 4th and so on, this happens: enter image description here
Any idea how to solve this? I belive it's simple enough, below is my code. Thanks in advance.
(It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.)
Zakres usług <div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img
src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
</div>
</section>
Solution 1:[1]
<div class="row">
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-2">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
</div>
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Pinal Sukhadiya |
