8 Columns in a row in Bootstrap 4 - css

Question

I need to have a row with 8 columns in a large device, but then the lower number columns in a smaller device.
The bootstrap uses the 12-grid system and by default, you have options of col-1, col-2, col-3, col-4, col-6 and col-12. So, it is not possible to have a row with 8 columns.
Although there are plenty of workarounds and I've tested all manner of them (like: this and this), One of the up-voted StackOverflow's answers is this.
Based on the mentioned answer, Although the following solution works perfectly, it does not work if I use bootstrap's predefined classes like col-md-3, col-sm-4, etc.
.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
width: 12.5%;
float: left;
}
#media (min-width: 768px) {
.col-sm-8r {
width: 12.5%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-8r {
width: 12.5%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
The following code words perfectly.
<div class="row">
<div class="col-lg-8r">
...
</div>
</div>
If I add another col-sm-* or col-md-*, the custom column (col-lg-8r) does not work.
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-8r">
...
</div>
</div>
PS I don't like to use the nested columns and rows workaround.
Bootstrap version: 4.4.1

Answer 1

I think it would be easier to extend the existing Bootstrap 4.4 row columns. For example...
#media (min-width: 992px) {
.row-cols-lg-8 > * {
flex: 0 0 12.5%;
max-width: 12.5%;
}
}
8 columns on lg, then 6 columns below lg...
<div class="row row-cols-lg-8 row-cols-6">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
...
</div>
Demo: https://codeply.com/p/0H3qKEVCqz

Answer 2

The reason it's not working appears to be a CSS load order issue. If you are loading your CSS before bootstrap, it's getting overridden by BS classes. For a proof of concept, I've added a style tag with your CSS after the BS include in the HTML panel:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-xs-8r,
col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
flex: 0 0 12.5%;
}
#media (min-width: 768px) {
.col-sm-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 992px) {
.col-md-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 1200px) {
.col-lg-8r {
flex: 0 0 12.5%;
}
}
</style>
<div class="row">
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
</div>
If you keep your CSS loading where it is, you can get more specific (I added .row before the selectors):
.row .col-xs-8r,
.row .col-sm-8r,
.row .col-md-8r,
.row .col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.row .col-xs-8r {
flex: 0 0 12.5%;
}
#media (min-width: 768px) {
.row .col-sm-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 992px) {
.row .col-md-8r {
flex: 0 0 12.5%;
}
}
#media (min-width: 1200px) {
.row .col-lg-8r {
flex: 0 0 12.5%;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
<div class="col-lg-8r col-sm-4 col-md-3">
column
</div>
</div>
IMPORTANT
On a side note, you are using Bootstrap 4 which is flex based. You should not be using float but rather flex-basis or the shorthand flex property.