Bootstrap - 5 column layout - html

Question

I'm trying to get 5 column full width layout but I can't find the solution that fits on my needs
Here's the code I use
<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-lg-12" style="border: 1px solid red">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
<div class="col-xs-2" id="p2">Two</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-2" id="p4">Four</div>
<div class="col-xs-2" id="p5">Five</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
lorem
</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
</div>
<!-- //container -->
As a result I get
And here is what I'm trying to achieve. Full width 5 column layout with a space between each column

Answer 1

5 Columns with Bootstrap 4
Here is 5 equal, full-width columns (no extra CSS or SASS) using the auto-layout grid..
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://codeply.com/go/MJTglTsq9h
This solution works because Bootstrap 4 is now flexbox. You can get the 5 colums to wrap within the same .row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns.
Update 2020
As of Bootstrap 4.4, you can also use the row-cols-5 class on the row...
<div class="container">
<div class="row row-cols-5">
<div class="col">
X
</div>
<div class="col">
X
</div>
<div class="col">
X
</div>
<div class="col">
X
</div>
<div class="col">
X
</div>
<div class="col">
X
</div>
</div>
</div>
https://codeply.com/p/psJLGuBuc3

Answer 2

UPDATE, 2021: for modern Bootstrap (4+), I recommend Zim's answer due to it's natural way of using Bootstrap flex classes
.col-xs-2{
background:#00f;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-2 col-half-offset" id="p2">Two</div>
<div class="col-xs-2 col-half-offset" id="p3">Three</div>
<div class="col-xs-2 col-half-offset" id="p4">Four</div>
<div class="col-xs-2 col-half-offset" id="p5">Five</div>
<div>lorem</div>
</div>
</div>
This should be ok.

Answer 3

Default bootstrap(version 4.6) grid allows you to do this.
You can make 7, 7 11 columns in a row.
<div class="container">
<div class="row row-cols-5">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Responsive version of this.
<div class="container">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-5">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

Answer 4

Just add this to your CSS
/* 5 Columns */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.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;
}
}

Answer 5

Sometimes I'm asked to use some pretty odd grid layouts in existing bootstrap websites (without messing up the current code). What I have done is create a separate CSS file which i can just drop into current bootstrap projects and use the grid layout styles in there. Here is what the bootstrap-5ths.css file contains along with an example of how it looks for bootstrap version 4.
If you want to use this with bootstrap version 3, just remove the col-xl-* styles and change the min-widths from 576px to 768px, 768px to 992px and 992px to 1200px.
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths,
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths,
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths,
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths,
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths,
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 576px) {
.col-sm-5ths {width: 20%;float: left;}
.col-sm-two5ths {width: 40%;float: left;}
.col-sm-three5ths {width: 60%;float: left;}
.col-sm-four5ths {width: 80%;float: left;}
}
#media (min-width: 768px) {
.col-md-5ths {width: 20%;float: left;}
.col-md-two5ths {width: 40%;float: left;}
.col-md-three5ths {width: 60%;float: left;}
.col-md-four5ths {width: 80%;float: left;}
}
#media (min-width: 992px) {
.col-lg-5ths {width: 20%;float: left;}
.col-lg-two5ths {width: 40%;float: left;}
.col-lg-three5ths {width: 60%;float: left;}
.col-lg-four5ths {width: 80%;float: left;}
}
#media (min-width: 1200px) {
.col-xl-5ths {width: 20%;float: left;}
.col-xl-two5ths {width: 40%;float: left;}
.col-xl-three5ths {width: 60%;float: left;}
.col-xl-four5ths {width: 80%;float: left;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-two5ths">2</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-three5ths">3</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-four5ths">4</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-five5ths">5</div>
</div>
</div>

Answer 6

<div class="row">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
<div class="col">Four</div>
<div class="col">Five</div>
</div>
you can customize however you need by writing media query. So that we can maintain responsive design
#media(max-width: 425px) {
.col {
flex-basis: auto;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
}
#media(min-width: 426px) and (max-width: 961px){
.col {
flex-basis: auto;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 50%;
}
}

Answer 7

CSS
.bg{
background-color: #9DC3E6;
border-radius: 10px;
color: #fff;
padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5-cols {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-5-cols {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-5-cols {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-5-cols {
width: 20%;
float: left;
}
}
html
<div className="row">
<div className="col-md-5-cols">1<div className="bg"></div></div>
<div className="col-md-5-cols">2<div className="bg"></div></div>
<div className="col-md-5-cols">3<div className="bg"></div></div>
<div className="col-md-5-cols">4<div className="bg"></div></div>
<div className="col-md-5-cols">5<div className="bg"></div></div>
</div>

Answer 8

If you want to enforce the 20% column width for every row that you have, even if you don't have 5 columns in some rows, you will have to add the following to your css or scss file:
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
#media (min-width: 768px) {
.col-sm-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
#media (min-width: 992px) {
.col-md-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
#media (min-width: 1200px) {
.col-lg-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
And in your html, use the added class as following:
<div class="row">
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
</div>

Answer 9

Why not using grid?
.container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-column-gap: 20px
}

Answer 10

Put some margin-left in all green divs but not in the first

Answer 11

Take a look at this page for general Boostrap layout information http://getbootstrap.com/css/#grid-offsetting
Try this:
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>
I've split the width into 5 uneven div with col-xs- 2,3,2,3,2 respectively. The two div with col-xs-3 are 1.5x the size of the col-xs-2 div, so the column width needs to be 2/3x (1.5 x 2/3 = 1) the col-xs-3 widths to match the rest.

Answer 12

That's better, you can use any div count.
.col-xs-2{
background:#00f;
color:#FFF;
}
.col_item {
margin-left:4.166666667%
}
.col_item:first-child,
.col_item:nth-child(5n+1) {
margin-left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-2 col_item" id="p1">One</div>
<div class="col-xs-2 col_item" id="p2">Two</div>
<div class="col-xs-2 col_item" id="p3">Three</div>
<div class="col-xs-2 col_item" id="p4">Four</div>
<div class="col-xs-2 col_item" id="p5">Five</div>
<div class="col-xs-2 col_item" id="p5">One</div>
</div>
</div>

Answer 13

The best way to honestly do this is to change the number of columns you have instead of trying to bodge 5 into 12.
The best number you could probably use is 20 as it's divisble by 2, 4 & 5.
So in your variables.less look for: #grid-columns: 12 and change this to 20.
Then change your html to:
<div class="row">
<div class="col-xs-20">
<div class="col-xs-4" id="p1">One</div>
<div class="col-xs-4" id="p2">Two</div>
<div class="col-xs-4" id="p3">Three</div>
<div class="col-xs-4" id="p4">Four</div>
<div class="col-xs-4" id="p5">Five</div>
</div>
<!-- //col-lg-20 -->
</div>
I'd personally use display: flex for this as bootstrap isn't designed greatly for a 5 column split.

Answer 14

Copypastable version of wearesicc's 5 col solution with bootstrap variables:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: $screen-sm) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: $screen-md) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: $screen-lg) {
.col-lg-15 {
width: 20%;
float: left;
}
}

Answer 15

can use as below in bootstrap3:
<div class="row">
<div class="col-md-2 col-md-offset-1">One</div>
<div class="col-md-2">Two</div>
<div class="col-md-2">Three</div>
<div class="col-md-2">Four</div>
<div class="col-md-2">Five</div>
</div>

Answer 16

Instead of adding margin why not add a padding-right of 1px to each col-xs-2 coz padding would be still a part of that div
.col-xs-2 :not(.col-xs-2:nth-child(5))
{padding-right:1px}

Answer 17

.col-xs-2{
background:#00f;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-4" id="p1">One</div>
<div class="col-xs-4 col-half-offset" id="p2">Two</div>
<div class="col-xs-4 col-half-offset" id="p3">Three</div>
<div>Test</div>
</div>
</div>

Answer 18

In bootstrap 4 and latest bootstrap 5 has become more simpler to handle 5 Column layout in big screen it will show 5 item, medium screen it will show 3 item, in small screen it will show 2 item with center alignment.
<div class="row justify-content-center">
<div class="col-sm-6 col-md-4 col-lg">One</div>
<div class="col-sm-6 col-md-4 col-lg">Two</div>
<div class="col-sm-6 col-md-4 col-lg">Three</div>
<div class="col-sm-6 col-md-4 col-lg">Four</div>
<div class="col-sm-6 col-md-4 col-lg">Five</div></div>

Answer 19

Here is another simple way of doing this, by adding width 20% to every col-xs-2:
<div class="col-xs-12">
<div class="col-xs-2" style="width:20%;" id="p1">One</div>
<div class="col-xs-2" style="width:20%;" id="p2">Two</div>
<div class="col-xs-2" style="width:20%;" id="p3">Three</div>
<div class="col-xs-2" style="width:20%;" id="p4">Four</div>
<div class="col-xs-2" style="width:20%;" id="p5">Five</div>
</div>

Answer 20

What about using offset?
<div class="row">
<div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-1">
1
</div>
<div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
2
</div>
<div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
3
</div>
<div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
4
</div>
<div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
5
</div>
</div>