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 h

Answer 1

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

Answer 2

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>

Answer 3

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

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.

Answer 5

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.

Answer 6

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