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

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>

Answer 2

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.

Answer 3

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>

Answer 4

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.