Divide a row in 5 columns in Bootstrap 4?
45,574
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>
Author by
weather api
Updated on February 26, 2020Comments
-
weather api about 4 years
How do you equally divide a row in 5 columns in Bootstrap 4 where it has 12 columns total? Anyone knows?
-
weather api about 7 years12/5 needs fraction?
-
Mandarr Sant about 7 yearscan you show diagrameticaly your expected output
-
DavidG about 7 yearsNot sure why people are downvoting this - it's a perfectly valid question, especially for people coming from version 3.
-
Toskan almost 7 yearswhy 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 almost 7 yearsthe answer is slightly incomplete because it doesn't mention for example
col-md-auto
e.g. you can combinecol-12
andcol-md-auto
-
Sk446 about 6 yearsThis 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.
-
Nikhil Kinkar over 5 years@DavidG that works great, but can you suggest how to expand it (to
col-sm-12
) in responsive view. -
orszaczky over 5 years@Sk446 can't you just add an empty col?
-
orszaczky over 5 years
col-12
withcol-md
also works for equally spaced columns that fill the full width of the row on md+ res -
Moslem Hadi about 3 yearsnot really usefull when you want 2 rows with 5 columns in a div.row
-
Mohammad Ayoub Khan about 3 yearsThere is a new improved answer. stackoverflow.com/a/66546867/9207553