Card Column Count not exceeding 6 columns - css

Question

I want to have multiple cards next to each other (preferebly 10), but the webpage only shows 6 at most.
Here is the css:
#media (min-width: 576px) {
/* line 256, node_modules/bootstrap/scss/_card.scss */
.card-columns2 {
-webkit-column-count: 7;
column-count: 7;
-moz-column-count: 7;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-count: 1.25rem;
width: 100%;
orphans: 1;
widows: 1;}
/* line 267, node_modules/bootstrap/scss/_card.scss */
.card-columns2 .card {
display: inline-block;
width: 100%;
} }
And here is the snippet of the HTML code:
<div class="mb-4 container-fluid" >
<div class="row" >
<div class="card-columns2">
<div class="card card-pin">
<img class="card-img" src="https://snipp" alt="#1481">
<div class="text-block" >
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="snipp" alt="#1546">
<div class="text-block" >
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
And that's how it looks like with column count of 7:
enter image description here
It looks the same for the count of 10, but with smaller boxes.

Answer 1

#media (min-width: 576px) {
/* line 256, node_modules/bootstrap/scss/_card.scss */
.card-columns2 {
-webkit-column-count: 10;
column-count: 10;
-moz-column-count: 10;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-count: 1.25rem;
width: 100%;
orphans: 1;
widows: 1;}
/* line 267, node_modules/bootstrap/scss/_card.scss */
.card-columns2 .card {
display: inline-block;
width: 100%;
padding: 0 15px;
} }
<div class="mb-4 container-fluid">
<div class="row">
<div class="card-columns2">
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1481">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1481">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1481">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1481">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
<div class="card card-pin">
<img class="card-img" src="https://via.placeholder.com/200x200.jpg?text=irtiza" alt="#1546">
<div class="text-block">
</div>
<div class="overlay">
<h2 class="card-title title"></h2>
<div class="more">
<a href="post.html">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>
</div>
</div>
</div>
</div>
</div>
</div>
The only change you need to update your css, -webkit-column-count: 10; in all where you use column count.
thanks