How to split the bootstrap line into 5 equal parts?

Question

I want to split the bootstrap line into 5 equal parts. It includes 12-col-md , so how can I divide it into equal 5 parts?

Can someone help me solve this problem?

Answer 1

Great way to resolve it here !

By default, Bootstrap does not provide a grid that allows us to create a layout of five columns, but as you can see, it is quite simple. First you need to create a default column definition as Bootstrap does. I called my classes col -..- 15.

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

Next, you need to determine the width of the new classes in the case of various media queries.

 .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } 

You are now ready to combine your classes with the original Bootstrap classes. For example, if you want to create a div element that behaves like a layout of five columns on medium screens and like four columns on smaller screens, you just need to use something like this:

 <div class="row"> <div class="col-md-15 col-sm-3"> ... </div> </div> 

Answer 2

Version of the old bootstrap

Use five divs with class span2 and give the first class offset1.

 <div class="row-fluid"> <div class="span2 offset1"></div> <div class="span2"></div> <div class="span2"></div> <div class="span2"></div> <div class="span2"></div> </div> 

Five equally spaced and centered columns.

---

In bootstraps 3.0 and 4 alpha.

 <div class="row"> <div class="col-md-2 col-md-offset-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> 

CUSTOM STYLE

Custom styles

 .container {width:100%; float:left;} .col1{ width:20%; float:left} 

Last table style

 .container {width:100%;display:table;} .col1{ width:20%; display:table-cell;} 

Answer 3

You can use something like

 <div class="container"> <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> 

the first container will have an offset, so you will have the same supply (col-sm-1) on the left and right sides with 5 equal containers inside.

Answer 4

  <div class="row"> <div class="col-md-7"> <div class="row"> <div class="col-md-4 bg-danger">1</div> <div class="col-md-4 bg-success">2</div> <div class="col-md-4 bg-danger">3</div> </div> </div> <div class="col-md-5"> <div class="row"> <div class="col-md-6 bg-success">4</div> <div class="col-md-6 bg-danger">5</div> </div> </div> </div> 

Answer 5

it's pretty simple if you use bootstrap 4, not sure if it also works in bootstrap 3

 <div class="container-fluid"> <h2>Bootstrap 4 Five Columns</h2> <h5>Full-width (within .container-fluid)</h5> <div class="row"> <div class="col"> <img src="//placehold.it/640x480" class="img-fluid"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> </div> 

Answer 6

You can use span2 to use the maximum amount of space. The code:

 <div class="row-fluid"> <div class="span2">1</div> <div class="span2">2</div> <div class="span2">3</div> <div class="span2">4</div> <div class="span2">5</div> </div> 

Answer 7

Use this css property in custromScript.css file for use on large devices

 .col-lg-2-0 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } 

and use the col-lg-2-0 class instead of col-lg-2 which will separate the four columns