8 Columns in a row in Bootstrap 4

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

score 3 · Accepted Answer · answered May 14 '20 at 18:40

3

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

answered May 14 '20 at 18:40

Carol Skelly

351,302
90
710
624

Very nice approach ;-) – Elyas Hadizadeh May 16 '20 at 04:31
Follow-up on your example which works perfectly on its own but not in my scenario where I have two columns, then in the second column I have the `row-cols-*-*` and they seem to do nothing, they conform to the top-level grid but don't do anything themselves. Is there an issue with nesting or am I missing something? – GµårÐïåñ Sep 25 '20 at 04:00

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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.

I'm pretty sure that it is not css loading issue because I load the bootstrap firstly. Maybe the reason is that you use `flex: 0 0 12.5%;`, but I used `width: 12.5%;`; — Elyas Hadizadeh, May 14 '20 at 17:37
I tested with `flex` and was able to recreate what you were seeing - your `lg` classes not applying. I was only able to fix that by loading the CSS after BS or making it more specific with `.row`. that's what lead me to believe it's a load order issue. — disinfor, May 14 '20 at 18:09

8 Columns in a row in Bootstrap 4

2 Answers2

IMPORTANT