In need of a row with 8 columns on a large device and fewer columns on a smaller device.
Bootstrap's 12-grid system only offers predefined classes like col-1, col-2, col-3, col-4, col-6, and col-12, making it impossible to have a row with exactly 8 columns.
Various workarounds have been explored, including solutions found on popular platforms like StackOverflow. However, the recommended solution may not align well with bootstrap's default classes such as 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;
}
// Responsive styling for custom column
@media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
The above code snippet successfully creates the desired layout.
<div class="row">
<div class="col-lg-8r">
...
</div>
</div>
However, adding another bootstrap class alongside the custom column disrupts the layout functionality.
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-8r">
...
</div>
</div>
Not a fan of using nested columns and rows as a workaround.
Bootstrap version being utilized: 4.4.1