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
This question is related to
html
css
twitter-bootstrap
The answer is
Why not using grid?
.container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-column-gap: 20px
}
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;
}
}
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.
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>
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>
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>
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> very 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>
That's better, you can use any div count.
.col-xs-2{_x000D_
background:#00f;_x000D_
color:#FFF;_x000D_
}_x000D_
_x000D_
.col_item {_x000D_
margin-left:4.166666667%_x000D_
}_x000D_
.col_item:first-child,_x000D_
.col_item:nth-child(5n+1) {_x000D_
margin-left: 0;_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
<div class="row" style="border: 1px solid red">_x000D_
<div class="col-xs-2 col_item" id="p1">One</div>_x000D_
<div class="col-xs-2 col_item" id="p2">Two</div>_x000D_
<div class="col-xs-2 col_item" id="p3">Three</div>_x000D_
<div class="col-xs-2 col_item" id="p4">Four</div>_x000D_
<div class="col-xs-2 col_item" id="p5">Five</div>_x000D_
<div class="col-xs-2 col_item" id="p5">One</div>_x000D_
</div>_x000D_
</div>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>
Put some margin-left in all green divs but not in the first
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;
}
}
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}
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, _x000D_
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, _x000D_
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, _x000D_
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, _x000D_
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, _x000D_
{_x000D_
position: relative;_x000D_
min-height: 1px;_x000D_
padding-right: 15px;_x000D_
padding-left: 15px;_x000D_
}_x000D_
_x000D_
@media (min-width: 576px) {_x000D_
.col-sm-5ths {width: 20%;float: left;}_x000D_
.col-sm-two5ths {width: 40%;float: left;}_x000D_
.col-sm-three5ths {width: 60%;float: left;}_x000D_
.col-sm-four5ths {width: 80%;float: left;}_x000D_
}_x000D_
_x000D_
@media (min-width: 768px) {_x000D_
.col-md-5ths {width: 20%;float: left;}_x000D_
.col-md-two5ths {width: 40%;float: left;}_x000D_
.col-md-three5ths {width: 60%;float: left;}_x000D_
.col-md-four5ths {width: 80%;float: left;}_x000D_
}_x000D_
_x000D_
@media (min-width: 992px) {_x000D_
.col-lg-5ths {width: 20%;float: left;}_x000D_
.col-lg-two5ths {width: 40%;float: left;}_x000D_
.col-lg-three5ths {width: 60%;float: left;}_x000D_
.col-lg-four5ths {width: 80%;float: left;}_x000D_
}_x000D_
_x000D_
@media (min-width: 1200px) {_x000D_
.col-xl-5ths {width: 20%;float: left;}_x000D_
.col-xl-two5ths {width: 40%;float: left;}_x000D_
.col-xl-three5ths {width: 60%;float: left;}_x000D_
.col-xl-four5ths {width: 80%;float: left;}_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-md-5ths">1</div>_x000D_
<div class="col-md-5ths">1</div>_x000D_
<div class="col-md-5ths">1</div>_x000D_
<div class="col-md-5ths">1</div>_x000D_
<div class="col-md-5ths">1</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="col-md-5ths">1</div>_x000D_
<div class="col-md-two5ths">2</div>_x000D_
<div class="col-md-two5ths">2</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="col-md-three5ths">3</div>_x000D_
<div class="col-md-two5ths">2</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="col-md-four5ths">4</div>_x000D_
<div class="col-md-5ths">1</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="col-md-five5ths">5</div>_x000D_
</div>_x000D_
</div>.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>
<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%;
}
}
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.
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>
Source: Stackoverflow.com