Divide a row in 5 columns in Bootstrap 4?

Question

How do you equally divide a row in 5 columns in Bootstrap 4 where it has 12 columns total? Anyone knows?

Not sure why people are downvoting this - it's a perfectly valid question, especially for people coming from version 3. — DavidG, Feb 26 '17 at 04:14
why people down vote it? because stackoverflow is run by a bunch of scrum masters who have 0 answers but like to downvote stuff because 'it doesn't fit the page'. This question is a perfect example. — Toskan, Jul 26 '17 at 13:52

score 39 · Accepted Answer · answered Feb 26 '17 at 04:10

39

Bootstrap 4 doesn't use floats like version 3 did so it can automatically space out your columns using just the col class. So for 5 equally spaced columns, just do this:

.col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}
.col4 {
  background-color: orange;
}
.col5 {
  background-color: brown;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col col1">Column 1</div>
    <div class="col col2">Column 2</div>
    <div class="col col3">Column 3</div>
    <div class="col col4">Column 4</div>
    <div class="col col5">Column 5</div>
  </div>
</div>

answered Feb 26 '17 at 04:10

DavidG

113,891
12
217
223

4

the answer is slightly incomplete because it doesn't mention for example `col-md-auto` e.g. you can combine `col-12` and `col-md-auto` – Toskan Jul 26 '17 at 13:55
22

This answer wont help if you've got a row with < 5 items but still want a 5-col grid. Instead it'll stretch the items to fill the grid. – Sk446 Apr 16 '18 at 19:56
2

@DavidG that works great, but can you suggest how to expand it (to `col-sm-12`) in responsive view. – Nikhil Kinkar Oct 29 '18 at 05:28
2

@Sk446 can't you just add an empty col? – orszaczky Nov 20 '18 at 19:10
1

`col-12` with `col-md` also works for equally spaced columns that fill the full width of the row on md+ res – orszaczky Nov 20 '18 at 19:12
not really usefull when you want 2 rows with 5 columns in a div.row – Moslem Hadi Mar 07 '21 at 08:05
There is a new improved answer. https://stackoverflow.com/a/66546867/9207553 – Mohammad Ayoub Khan Mar 09 '21 at 12:29

Divide a row in 5 columns in Bootstrap 4?

1 Answers1

Linked