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

---

For Bootstrap 3

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.

Use five divs with a class of span2 and give the first a class of offset1.

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

Voila! Five equally spaced and centered columns.

---

In bootstrap 3.0, this code would look like

<div class="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>

---

UPDATE

Since bootstrap 4.0 uses Flexbox by default:

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></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.

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: https://stackoverflow.com/questions/31944691/bootstrap-5-column-layout?noredirect=1&lq=1

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

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/

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

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.

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

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

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

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

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

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>

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>

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

The best way

Only add .row-cols-5 class to your row. so you have 5 div on each line.

<div class="container-fluid">
    <div class="row row-cols-5">
        <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 class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
    </div>
</div>

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut.

• row-cols-*
• row-cols-sm-*
• row-cols-md-*
• row-cols-lg-*
• row-cols-xl-*

You can also use the accompanying Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

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.

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>

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

In my opinion it is better to use it like this with Less syntax. This answer is based on the [answer][1] 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 */

[1]: https://stackoverflow.com/a/22799354/3356028 "For Bootstrap 3 and above"

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

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

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*/
  }
}

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

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,
.col-sm-custom,
.col-md-custom,
.col-lg-custom,
.col-xl-custom {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-custom {
  flex: 0 0 20%;
  max-width: 20%;
}

@media (min-width: 576px){
  .col-sm-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 768px){
  .col-md-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 992px){
  .col-lg-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 1200px){
  .col-xl-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/*DEMO*/
.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">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
  </div>
</div>

For Bootstrap 5 or later

You can use the row-cols- class name.

ex: row-cols-1, row-cols-5, row-cols-lg-5

<div class="container">
  <div class="row row-cols-5">
     // place your all cols here
  </div>
</div>

For more information read the official docs

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;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }

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

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.

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

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

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

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    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%;">

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

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/

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

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

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();
}

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 {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson

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

flex-grow-x could be used too

div div div {
  border: solid;
  /* it allows margins too */
  margin: 3px;
}

div div div:before {
  content: attr(class);
  /* show class used */
  color: crimson
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
  </div>
</div>

If using bootstrap 4 and SASS (+ bootstrap variables) you can use this simplified answer:

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

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

  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    .col#{$infix}-fifth {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
}

Also supports breakpoints and you can simply add new .col#{$infix}-xxx classes

The easiest way is by adding row-cols-5 to your row. Read more here

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
<div class="row row-cols-5">
  <div class="col border bg-primary">Col 1</div>
  <div class="col border bg-primary">Col 2</div>
  <div class="col border bg-primary">Col 3</div>
  <div class="col border bg-primary">Col 4</div>
  <div class="col border bg-primary">Col 5</div>
  <div class="col border bg-primary">Col 6</div>
  <div class="col border bg-primary">Col 7</div>
</div>
</div>

In my case just using the col didn't give the right effect. All items will appear next to each other and I didn't want to figure out with PHP when to place row elements.

So how about creating a class to extend our bootstrap col features? In case people are wondering how to make 5 columns work with Bootstrap without using the col class.

mods/bootstrap.less:

@media @md {
    .col-md-2-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

I named it .col-md-2-4 because Bootstrap's 12 grid layout devided by 5 is 2.4.

Now you can create a 5 column layout. Also in combination with other breakpoint column classes:

<div class="col-6 col-sm-4 col-md-2-4">
   1/5 column
</div>

Be aware that I added a media query with less code around the statement. So if you want to add other column breakpoint classes be sure you use the right media query around it.

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!