Five Column Bootstrap Layout without changing Grid Size

Question

So I would like to create a five column layout as provided to me in this mockup:

five column layout mockup

So here's my question:

I know I can change my overall grid to a number that is evenly divisible by 5 and create new column classes.

BUT...that is not an option because so much of what we have already built is based on the 12 column grid.

SO...

How do i go about creating a 5 column layout, with a grid system that is fixed at 12?

This is being done within a panels module in Drupal 7, for which we use bootstrap classes to provide the layout. But I'm wondering if I have a stylesheet that overrides the bootstrap styles, and just create my own, but I'd much rather use bootstrap if I can.

Thanks for the your help, input, and advice.

Cheers.

Answer 1

You would use Bootstrap column offsets. You'd actually use 10 of the 12 columns units, and then offset the first leftmost column like this:

<div class="container-fluid">
    <div class="row">
          <div class="col-sm-2 col-sm-offset-1">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
     </div>  
</div>

http://www.bootply.com/GtXXrcUa5Q

Other options for getting five column layout are described in this answer

Bootstrap 4 - 5 columns