Bootstrap grid really 5 columns?

Question

HTML

Actually the question is, there are 12 columns, but I would have 5 aligned in the center of the same width. What to do in this case if I have bootstrap?

Answer 1

Add extra classes to the top of your css or to the bottom of bootstrap.css:

.col-xs-five,
.col-sm-five,
.col-md-five,
.col-lg-five {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-five {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-five {
        width: 20%;
        float: left;
    }
}

Set the padding to your liking. More precisely, do not touch if you did not change the default bootstrap.
Found another option using built-in classes:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

If you need to line them up vertically at some resolution, you just need to make display: block to the .btn-group class

Answer 2

Everything is simpler in bootstrap 4)
Creating 5 adaptive blocks with the same width in a row.

<div class="row">
    <div class="col"> 1/5 </div>
    <div class="col"> 2/5 </div>
    <div class="col"> 3/5 </div>
    <div class="col"> 4/5 </div>
    <div class="col"> 5/5 </div>
</div>

https://itchief.ru/lessons/bootstrap-3/bootstrap-4...

Answer 3

There is one option. The very best.
DO NOT USE BOOTSTRAP :)

Answer 4

I did this (of all the blocks, only two had 5 columns, the rest were standard 2-3):

html:
<div class="row column-5">
    <div class="col-md-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-1"></div>
</div>

css:
.column-5 .col-md-1  {
  width: 0%;
}
.column-5 .col-md-2 {
width: 20%;
}

And it’s better to use UIkit for the grid, you can make from 1 to 10 columns there without any problems.

Answer 5

12 = 1-offset+2 + 2 + 2 + 2 + 2 + 1-offset