Consider setting the min-width
to 20% to resolve the issue. This will ensure a minimum width of 20%
, allowing for only 5 items per row.
.my-col {
min-width: 20%;
}
For mobile support, create a custom media query to set min-width: 50%
.
@media screen and (max-width: 480px) {
.my-col {
min-width: 50%;
}
}
Demos
Here's how it looks in normal view:
.my-col {
min-width: 20%;
}
@media screen and (max-width: 480px) {
.my-col {
min-width: 50%;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col my-col">
1
</div>
<div class="col my-col">
2
</div>
<div class="col my-col">
3
</div>
<div class="col my-col">
4
</div>
<div class="col my-col">
5
</div>
<div class="col my-col">
6
</div>
<div class="col my-col">
7
</div>
<div class="col my-col">
8
</div>
<div class="col my-col">
9
</div>
<div class="col my-col">
10
</div>
</div>
When fewer than 5 items are present, they will be justified automatically.
.my-col {
min-width: 20%;
}
@media screen and (max-width: 480px) {
.my-col {
min-width: 50%;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col my-col">
1
</div>
<div class="col my-col">
2
</div>
<div class="col my-col">
3
</div>
<div class="col my-col">
4
</div>
</div>