Grid system in Bootstrap3 for five columns

Question

I am trying to develop a bootstrap template and facing a problem with grid system. In my template it has five columns in a row. Each column must be equal. It will not be a problem if it is three, four or six columns. I can write it easily by col-md-3 or col-md-4 or col-md-6 . But how can i right that for five columns. Is there any way or need to write custom css? Please tell me.

Duplicate: http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap — Sergei Beregov, May 23 '14 at 11:06
Would you be willing to create a complementary stylesheet with LESS ? — Sherbrow, May 23 '14 at 12:24

score 0 · Answer 1 · answered May 23 '14 at 11:06

0

Write your own selector col-md-5 and just copy properties from that selectors and set width: to a 20%. That should works :)

answered May 23 '14 at 11:06

kgruszowski

76
2
9

`col-md-5` in a 12-columns grid has a width of 5/12 not 20% The name should be entirely different – Sherbrow May 23 '14 at 12:20

score 0 · Answer 2 · answered Oct 05 '20 at 09:36

Actually it is quite simple if you are using bootstrap 4. just do like this and there will be equal 5 columns.

<div class="container-fluid">
  <h3>Bootstrap 4 Five Columns</h3>
  <div class="row">
    <div class="col">
      <h3>column 1</h3>
    </div>
    <div class="col">
      <h3>column 2</h3>
    </div>
    <div class="col">
      <h3>column 3</h3>
    </div>
    <div class="col">
      <h3>column 4</h3>
    </div>
    <div class="col">
      <h3>column 5</h3>
    </div>
  </div>

Also sharing reference link below for further understanding. Equal Columns

Grid system in Bootstrap3 for five columns

2 Answers2