Bootstrap - 5 column layout

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

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 2

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 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

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 19

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>