[twitter-bootstrap] Five equal columns in twitter bootstrap

I want to have 5 equal columns on a page I am building and I can't seem to understand how the 5 column grid is being used here: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

Is the five column grid being demonstrated above part of the twitter bootstrap framework?

For Bootstrap 3 and above

A fantastic full width 5 columns layout with Twitter Bootstrap was created here.

This is by far the most advanced solution since it works seamlessly with Bootstrap 3. It allows you to re-use the classes over and over again, in pair with the current Bootstrap classes for responsive design.

CSS:
Add this to your global stylesheet, or even to the bottom of your bootstrap.css document.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Put it to use!
For example, if you want to create a div element that behaves like a five column layout on medium screens and like two columns on smaller ones, you just need to use something like this:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

WORKING DEMO - Expand the frame to see the columns become responsive.

ANOTHER DEMO - Incorporating the new col-*-5ths classes with others such as col-*-3 and col-*-2. Resize the frame to see them all change to col-xs-6 in responsive view.

For Bootstrap 4

Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested.

Here's an example:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

WORKING DEMO

Is someone uses bootstrap-sass (v3), here is simple code for 5 columns using bootstrap mixings:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Make sure you have included:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Create a custom Bootstrap download for 5 column layout

Go to Bootstrap 2.3.2 (or Bootstrap 3) customization page and set the following variables (don't input semicolons):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Download your build. This grid would fit into default containers, preserving default gutter widths (almost).

Note: If you are using LESS, update variables.less instead.

This is awesome: http://www.ianmccullough.net/5-column-bootstrap-layout/

Just do:

<div class="col-xs-2 col-xs-15">

And CSS:

.col-xs-15{
    width:20%;
}

My preferred approach to this problem is to create a SASS mixin utilizing existing Bootstrap variables based on the make-grid-columns mixin.

// Custom Grid Columns
// 
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    $columns: round($grid-columns / $size);

    %custom-grid-column {
        @include make-col-ready();
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .col#{$infix}-#{$name} {
            @extend %custom-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Create column
            .col#{$infix}-#{$name} {
                @include make-col($size);
            }

            // Create offset
            @if not ($infix=="") {
                .offset#{$infix}-#{$name} {
                    @include make-col-offset($size);
                }
            }
        }
    }
}

Then you can call the mixin to generate the custom column and offset classes.

@include custom-grid-columns('5ths', 2.4);

Bootstrap or other grid system it doesn't always mean simpler and better. Inside your .container or .row (to keep your responsive layout) u can just create 5 divs (with class .col f.e.) and add css like this:
.col { width: 20%; float: left };

update: nowodays its better to use flexbox

In case you do no need the exact same width of columns you can try create 5-columns using nesting:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

The first two columns will have width equal 5/12 * 1/2 ~ 20.83%

The last three columns: 7/12 * 1/3 ~ 19.44%

Such hack gives the acceptable result in many cases and does not require any CSS changes (we're using only the native bootstrap classes).

For Bootstrap 4.4+

Use the brand new row-cols-n classes.

1. Add row-cols-5 class to your .row div. No custom CSS needed.
2. See the 4.4 doc here for row-cols : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

For Bootstrap 4 versions prior to Bootstrap 4.4

1. Copy CSS below (awesome CSS by Bootstrap authors) and add it to your project

2. Read the docs cited above to use it correctly.

   .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

By default Bootstrap does not provide grid system that allows us to create five columns layout, you need to create default column definition in the way that Bootstrap do create some custom classes and media queries in your css file

.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;
    }
}

and some html code

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

5 columns layout with Twitter Bootstrap style

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}

In my opinion it is better to use it like this with Less syntax. This answer is based on the answer from @fizzix

This way columns use variables (@grid-gutter-width, media breakpoints) that user may have overriden and the behavior of five columns matches with behavior of 12 column grid.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */

Keep the original bootstrap with 12 columns, do not customize it. The only modification you need to make is some css after the original bootstrap responsive css, like this:

The following code has been tested for Bootstrap 2.3.2:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

And the html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Note: Even though the span2 times 5 doesn't equal 12 columns, you get the idea :)

A working example can be found here http://jsfiddle.net/v3Uy5/6/

A solution that do not require a lot of CSS, nor tweaking bootstrap default 12col layout:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

I voted up Mafnah's answer but looking at this again I'd suggest the following is better if you're keeping the default margins etc.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

Update 2019

Bootstrap 4.1+

Here are 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 columns to wrap within the same .row using a break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns.

Also see: Bootstrap - 5 column layout

Just create a new class and define its behaviour per each each media query as needed

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

here is a working demo https://codepen.io/giorgosk/pen/BRVorW

In bootstrap v4.3.1, it’s a column which is 12 / 5 = 2.4 columns wide. let’s call it col-2dot4 (and col-sm-2dot4, col-md-2dot4, …).

And each column should have 20% of the available space.

The SCSS code which comes out as below:

@mixin make-5-grid-column($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .col#{$infix}-2dot4 {
      @extend %grid-column;
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {

      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }


      .col#{$infix}-2dot4 {
        @include make-col(1, 5);
      }
    }
  }
}

@if $enable-grid-classes {
  @include make-5-grid-column();
}

Below is a combo of @machineaddict and @Mafnah answers, re-written for Bootstrap 3 (working well for me so far):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

For twitter bootstrap 3 this is the most simple way to achieve this:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

Create 5 elements with the class col-sm-2 and add to the first element also the class col-sm-offset-1

P.s. this will not be full width (it will be indented a little from the right and left of the screen)

The code should look something like this

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

With flexbox http://output.jsbin.com/juziwu

.flexrow {_x000D_
  display: flex;_x000D_
  background: lightgray; /*for debug*/_x000D_
}_x000D_
.flexrow > * {_x000D_
  flex: 1;_x000D_
  margin: 1em;_x000D_
  outline: auto green;_x000D_
}

<div class="flexrow">_x000D_
  <div>...</div>_x000D_
  <div>...</div>_x000D_
  <div>...</div>_x000D_
  <div>...<br>..</div>_x000D_
  <div>...</div>_x000D_
</div>

var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

Jquery and Done! Framework!

.col-half-offset{
    margin-left:4.166666667% !important;
    float: left;
}

<div className="row1 marginTop20">
    <div className="col-xs-12 col-sm-2 col-md-2">
        1
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        2
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        3
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        4
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        5
    </div>
    <div className="clearfix"></div>
</div>

Five columns are clearly not the part of bootstrap by design.

But with Bootstrap v4 (alpha), there are 2 things to help with a complicated grid layout

1. Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), the new element type (official - https://www.w3.org/TR/css-flexbox-1/)
2. Responsive utilities (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

In simple term, I'm using

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

Be it 5,7,9,11,13 or something odds, it'll be okay. I'm quite sure that 12-grids standard is able to serve more than 90% of use case - so let's design that way - develop more easier too!

The nice flex tutorial is here "https://css-tricks.com/snippets/css/a-guide-to-flexbox/"

An improvisation on @lightswitch's answer, if we need a 5 column grid using LESS iterations

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

This will generate css classes .col-md-5th-1, col-md-5th-2, col-md-5th-3, and so on which corresponds to 10%, 20%, 30%... respectively

the bootstrap grid system as parted in 12 grid.So i parted it to two grid (7+5).This 7 and 5 are also contain full 12 grid.Thats why i parted 7(4+4+4) and 5(6+6) so it will take all content,simple

HTML

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-7 five-three">
      <div class="row">
        <div class="col-sm-4">
          Column 1
        </div>
        <div class="col-sm-4">
          Column 2
        </div>
        <div class="col-sm-4">
          Column 3
        </div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6">
          Col 4
        </div>
        <div class="col-sm-6">
          Col 5
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}

It can be done with nesting and using a little css over-ride.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>?<!-- end outer row -->

Then some css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Here is an example: 5 equal column example

And here is my full write up on coderwall

Five equal columns in bootstrap 3

the easiest solution without any need to edit CSS would be:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

And if you need those to break beyond any breakpoint, just make btn-group block. Hope this helps someone.

I've created SASS mixin definitions based on bootstrap definitions for any number of columns (personally beside 12 I use 8, 10 and 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

And you can simply create classes by:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

I hope someone will find it useful

Bootstrap by default can scale up to 12 columns? This means if we want to create a 12-column layout of equal width, we would write inside div class="col-md-1" twelve times.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>

For Bootstrap 3, if you want full-width and are using LESS, SASS, or something similar, all you have to do is make use of Bootstrap's mixin functions make-md-column, make-sm-column, etc.

LESS:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

Not only can you build true full-width bootstrap column classes using these mixins, but you can also build all the related helper classes like .col-md-push-*, .col-md-pull-*, and .col-md-offset-*:

LESS:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

Other answers talk about setting @gridColumns which is perfectly valid, but that changes the core column width for all of bootstrap. Using the above mixin functions will add 5 column layout on top of the default bootstrap columns, so it will not break any 3rd party tools or existing styling.

boostrap comes today with the possibility to fill a row evenly with built-in class that do not tell how many columns out of twelve to span :

you can use a col/col-xx :

div div div {_x000D_
  border: solid;_x000D_
  margin: 2px;/* this can be added without breaking the row */_x000D_
}_x000D_
div div div:before {_x000D_
content:attr(class);/* show class used */_x000D_
color:crimson

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<p>Class used , play snippet in full page to test behavior on resizing :</p>_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-sm"></div>_x000D_
    <div class="col-sm"></div>_x000D_
    <div class="col-sm"></div>_x000D_
    <div class="col-sm"></div>_x000D_
    <div class="col-sm"></div>_x000D_
  </div>_x000D_
  <div class="row">_x000D_
    <div class="col-md"></div>_x000D_
    <div class="col-md"></div>_x000D_
    <div class="col-md"></div>_x000D_
    <div class="col-md"></div>_x000D_
    <div class="col-md"></div>_x000D_
  </div>_x000D_
  <div class="row">_x000D_
    <div class="col"></div>_x000D_
    <div class="col"></div>_x000D_
    <div class="col"></div>_x000D_
    <div class="col"></div>_x000D_
    <div class="col"></div>_x000D_
  </div>_x000D_
</div>

flex-grow-x could be used too

div div div {_x000D_
  border: solid;_x000D_
  /* it allows margins too */_x000D_
  margin: 3px;_x000D_
}_x000D_
_x000D_
div div div:before {_x000D_
  content: attr(class);_x000D_
  /* show class used */_x000D_
  color: crimson_x000D_
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="flex-grow-1"></div>_x000D_
    <div class="flex-grow-1"></div>_x000D_
    <div class="flex-grow-1"></div>_x000D_
    <div class="flex-grow-1"></div>_x000D_
    <div class="flex-grow-1"></div>_x000D_
  </div>_x000D_
</div>

BOOTSTRAP 4

I read all answers and I didn't find "the obvious one". Basically what you need to do is to take any bootstrap column (for example col-2) and edit few values. In this example I am using .col-custom class.

Five equal columns means each one occupies 20%, so: flex:0 0 20% and max-width:20%. The same way you can create other number of columns (7, 9, 11, 84 or whatever you want).

You can create CSS variables with custom width, and use it in your projects. Something like that:

:root {
  --col-custom: 20%;
}

.col-custom {
  flex: 0 0 var(--col-custom);
  max-width: var(--col-custom);
}

Working example:

.col-custom,_x000D_
.col-sm-custom,_x000D_
.col-md-custom,_x000D_
.col-lg-custom,_x000D_
.col-xl-custom {_x000D_
  position: relative;_x000D_
  width: 100%;_x000D_
  padding-right: 15px;_x000D_
  padding-left: 15px;_x000D_
}_x000D_
_x000D_
.col-custom {_x000D_
  flex: 0 0 20%;_x000D_
  max-width: 20%;_x000D_
}_x000D_
_x000D_
@media (min-width: 576px){_x000D_
  .col-sm-custom {_x000D_
    flex: 0 0 20%;_x000D_
    max-width: 20%;_x000D_
  }_x000D_
}_x000D_
@media (min-width: 768px){_x000D_
  .col-md-custom {_x000D_
    flex: 0 0 20%;_x000D_
    max-width: 20%;_x000D_
  }_x000D_
}_x000D_
@media (min-width: 992px){_x000D_
  .col-lg-custom {_x000D_
    flex: 0 0 20%;_x000D_
    max-width: 20%;_x000D_
  }_x000D_
}_x000D_
@media (min-width: 1200px){_x000D_
  .col-xl-custom {_x000D_
    flex: 0 0 20%;_x000D_
    max-width: 20%;_x000D_
  }_x000D_
}_x000D_
_x000D_
/*DEMO*/_x000D_
.col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-custom{height:100px;border:1px red solid}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">_x000D_
_x000D_
<div class="container-fluid">_x000D_
  <div class="row">_x000D_
    <div class="col-sm-custom"></div>_x000D_
    <div class="col-sm-custom"></div>_x000D_
    <div class="col-sm-custom"></div>_x000D_
    <div class="col-sm-custom"></div>_x000D_
    <div class="col-sm-custom"></div>_x000D_
  </div>_x000D_
</div>

You can use the little trick to make the col-md-2 with offsets solution full width. It use the way that bootstrap does to remove(hide) 15px paddings.

I mean by adding "-" margins. Actually the calc(-10% - 15px); margins for both side. (10% is the offset width and 15px for the padding).

The only minus is it will make the page scroll horizontal so you will need the overflow-x:hidden on the parent of the row.

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

Here is demo: http://jsfiddle.net/sct3j/171/

Bootstrap 4, variable number of columns per row

If you want to have up to five columns per row, so that fewer numbers of columns still only take up 1/5th of the row each, the solution is to use Bootstrap 4's mixins:

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

In bootstrap 3, I think we can do something like that, for remove left and right margin :

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

and CSS

.this_row {
    margin: 0 -5%;
}

How You can add 5 columns grid in bootstrap

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}_x000D_
.item{width:100%;height:100px; background-color:#cfcfcf;}_x000D_
.col-xs-1-5{width: 20%;float:left;} }_x000D_
_x000D_
@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }_x000D_
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }_x000D_
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }

<div class="row">_x000D_
  <div class="col-sm-1-5">_x000D_
    <div class="item">Item 1</div>_x000D_
  </div>_x000D_
  <div class="col-sm-1-5">_x000D_
    <div class="item">Item 2</div>_x000D_
  </div>_x000D_
  <div class="col-sm-1-5">_x000D_
    <div class="item">Item 3</div>_x000D_
  </div>_x000D_
  <div class="col-sm-1-5">_x000D_
    <div class="item">Item 4</div>_x000D_
  </div>_x000D_
  <div class="col-sm-1-5">_x000D_
    <div class="item">Item 5</div>_x000D_
  </div>_x000D_
</div>

Another way to enable 5 columns in Bootstrap 3 is to modify the 12 columns format used by default by Bootstrap. And then create a 20 columns grid (use customize on the Bootstrap website OR use the LESS/SASS version).

To customize on the bootstrap website, go to Customize and Download page, update variable @grid-columns from 12 to 20. Then you will be able to create 4 as well as 5 columns.