How to divide bootstrap row into 5 equal parts?

Question

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

Can anyone help me to solve this problem?

possible duplicate of [Five equal columns in twitter bootstrap](http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap) — anpsmn, Mar 17 '15 at 07:14

score 21 · Answer 1 · edited Sep 27 '20 at 10:42

A great way to resolve this is here!

By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it’s quite simple. At first you need to create default column definition in the way that Bootstrap do it. 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 define width of new classes in case of different 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;
    }
}
Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behave like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:
<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Much better solution so far – milind prajapati Apr 07 '22 at 12:01 — milind prajapati, Apr 07 '22 at 12:01

Ravi Delixan · Answer 2 · 2016-05-17T09:46:05.423

Old bootstrap Version

Use five divs with a class of span2 and give the first a class of 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 bootstrap 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}

Latest Table style

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

use offset-md-1 instead of col-md-offset-1 in bootstrap4. – Abe Apr 15 '19 at 00:56 — Abe, Apr 15 '19 at 00:56

score 4 · Answer 3 · answered Mar 17 '15 at 08:28

4

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 offset so you will have the same margin (col-sm-1) on the left and right side with 5 equal containers inside.

answered Mar 17 '15 at 08:28

iurii

4,142
2
23
28

1

@RaviDelixan has the same answer but with more options and content – Abob May 12 '16 at 02:47

Syed Shibli · Answer 4 · 2019-10-05T07:48:17.823

it is quite simple if you are using 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>

score 3 · Answer 5 · answered Apr 02 '21 at 06:09

You can use the row-cols-* (eg: row-cols-3, row-cols-md-3) class for your requirement.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

for more details Visit to official bootstrap site

score 2 · Answer 6 · answered May 22 '19 at 19:45

 <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>

score 1 · Answer 7 · answered Nov 13 '20 at 10:33

You can use bootstrap-4 default 'col' property to solve this issue.

<div class="row no-gutters">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

This will auto divide the given space into 5 equal parts.

Note: This can create issues in case if you want to show 3 columns on any other screen. Let's say if you want to show 5 columns in a row on medium screens then you can add class "col-md" on each element. But if you need 3 columns in a row on sm screens then you will face issues.

score 0 · Answer 8 · edited May 12 '16 at 03:05

0

You can use span2 to utilize maximum amount of space. Please find 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>

edited May 12 '16 at 03:05

Abob

751
5
27

answered Mar 17 '15 at 06:52

Shibaji Chakraborty

75
3

score 0 · Answer 9 · edited Mar 05 '19 at 18:55

0

Use this css property in your custromScript.css file to use in large Device


    .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 class col-lg-2-0 instead of col-lg-2 which will divide four columns

edited Mar 05 '19 at 18:55

AS Mackay

2,831
9
19
25

answered Mar 05 '19 at 18:33

amar agrawal

1

score 0 · Answer 10 · answered Sep 27 '20 at 10:38

You can customize the css of bootstrap. You need import the scss files in a your own custom.scss file. Then you have to use compile custom.scss to css in another file. For ex: custom.css. Checkout this link for more detailed information. Bootstrap Theming

In custom.scss file

$grid-columns:15;
@import "node_modules/bootstrap/scss/bootstrap";

Then you can use col-{breakpoint}-3 in your project to have 5 equal width columns.

CAREFUL

This will be global. You have to change other files too if you have used default 12 point grid system elsewhere in your project.

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

-1

I would suggest to use table instead of bootstrap for dividing it into 5 parts and inside each column again you can use bootstrap grid.

This answer may help you this

But if you have any other issues that you can't go with the above way please comment below.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 30 '20 at 17:47

Gajendra K S

117
1
5

How to divide bootstrap row into 5 equal parts?

11 Answers11

Linked