Five equal columns in twitter bootstrap

Question

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?

You're looking at a very old version of the bootstrap. Are you looking to have a 5-column "responsive" grid on the (latest, i hope) bootstrap? — Andres I Perez, Apr 30 '12 at 17:54
I just realized that.The one stated is v1.3.0 and the current is 2.0.2.The latest version is a 12-column grid meaning i can have 2,3,4 and 6 equal columns.What i was asking is,if it would be possible to have 5 equal columns without having to change a lot of things. — Gandalf, Apr 30 '12 at 18:09
you can, yes, but it will require heavy modifications to some of the grid elements and also the responsive grid elements. Is your site responsive at all? It would be a bit easier to come up with an answer that way, otherwise it would be a lot of code. — Andres I Perez, Apr 30 '12 at 18:13
Yes,the site is responsive but i would have to modify the grid elements too not the responsive part only imho. — Gandalf, Apr 30 '12 at 18:19
What im saying is that if the grid elements are modified to accommodate a 5-grid setup then the responsive feature will also have to be heavily modified to support them. — Andres I Perez, Apr 30 '12 at 18:25
I am having some success* with .container.one-fifth.column { width:17%; } although i am expecting something aweful to take my breath away.17.87847% too. — Gandalf, Apr 30 '12 at 18:39
I added .spanfifth { width: 17.89987%; } to bootstrap.css and it works even when i resize the browser. — Gandalf, Apr 30 '12 at 19:13
18.298% would work for one fifth but when you wan't four fifth and the other fifths to work,something below or above 17% is proving problematic. — Gandalf, Apr 30 '12 at 20:51
This is one of the things that Bootstrap seem to ignore totally, Foundation for example have created a block-grid that can have any number of columns that are equal with of course the ability to change how many to show in one row for different breakpoints [Check The docs](http://foundation.zurb.com/docs/components/block_grid.html) What I highly advice is not to try to extend Bootstrap on this one, just go on with creating your own layout that generalises having any odd number of columns per row, you can cheat from this Foundation Module as a starter and fit it to your needs. — Zyad Sherif, Apr 02 '15 at 13:59
**Bootstrap 4** - Simply use auto-layout. It requires no extra CSS or SASS: http://stackoverflow.com/a/42226652/171456 — Carol Skelly, Feb 14 '17 at 12:53

score 591 · Answer 1 · edited Sep 22 '21 at 12:52

591

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.

edited Sep 22 '21 at 12:52

Suraj Rao

29,388
11
94
103

answered Apr 02 '14 at 00:21

Fizzix

23,679
38
110
176

1

Calling them `col-*-15` might be confusing. It seems to imply they’re part of a 15-column grid system, which they’re not. – Paul D. Waite May 02 '14 at 15:41
Yes I understand that, although I was not to sure what else to call them since `col-*-3` does not mean that there are 3 columns across, so `col-*-5` would be confusing too. Do you have any naming recommendations @PaulD.Waite? – Fizzix May 03 '14 at 08:24
I know what you mean, I couldn’t think of a good alternative. – Paul D. Waite May 03 '14 at 17:23
2

@PaulD.Waite - I added a little note to my answer to let people know. – Fizzix May 04 '14 at 01:13
2

`col-*-15` is fine with me, but `col-*-5ths` might be a slightly less confusing column name. That's what I'm using so that my other developers don't come to me confused. – Mordred Jun 03 '14 at 23:11
@Mordred - Great idea! I'll edit my answer to go with that :) – Fizzix Jun 04 '14 at 23:01
Why do you make them relative positioned when they're already floated? Is there a browser bug you're working around or something? – scragar Jun 10 '14 at 10:10
3

Hey @scragar - If you view the styling for all Bootstrap's current column classes, you will notice that they all contain `position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;`. Basically, the code I posted is just extending on this so that they match Bootstrap's built in styling EXACTLY. I then apply a width of `20%` so that 5 equal columns can fit across the page. Very simple :) – Fizzix Jun 10 '14 at 23:03
very useful - thanks. I had to change the padding from 10px to 15px for the columns to align left and right with content in standard 12 column bootstrap rows, though. Typo in css above? – andyb Jul 29 '15 at 16:33
why you need to write media query? I think we can write `.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 20%; float: left; }` – Malay M Sep 15 '15 at 05:40
This solution works fine for 5 columns. However it does not work properly in case one needs 5 columns for medium screen and 6 columns for large screen. Please consider revising the 1200px media as follows: @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } .col-lg-2.col-md-5ths { width: 16.67%; } } – Marinos An Nov 17 '15 at 15:16
@MalayMondal - The media queries are **definitely** needed. If you use `col-lg-5ths`, and the screen is below 1200px, it'll be full width instead of `20%` since they referenced the `lg` class. Always keep in mind with Boostrap, it is "mobile first". – Fizzix Mar 08 '16 at 04:08
As long as there is 5ths it won't listen to any col-s, why? – Bojan Kogoj Mar 10 '16 at 10:08
@BojanKogoj - Can you please explain what you mean in further detail? – Fizzix Mar 10 '16 at 10:10
1

how about naming for 2/5 column ? Or we should use : col-md-1ths for 1/5 and col-md-2ths for 2/5, col-md-5ths for 5/5 = full width ? – Alex Nov 23 '16 at 02:42
Hey @Fizzix thanks for adding the Bootstrap 4 reference. But what about if I need to display the 5 columns only in ≥992px and <992px display each "element" in a full-width row. in https://getbootstrap.com/docs/4.0/layout/grid/ says: Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit `flex-basis` or `border`. /// But how can I achieve that behaviour that I want? could you help me, please? – candlejack Dec 17 '17 at 19:00
I have posted it on a new question: https://stackoverflow.com/questions/47858501/non-12-divisible-equal-columns-on-bootstrap-4 – candlejack Dec 17 '17 at 19:08

score 436 · Accepted Answer · edited Dec 11 '21 at 02:44

436

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>

edited Dec 11 '21 at 02:44

Stone

31
2
14

answered Dec 21 '12 at 23:12

jkofron.e

5,043
1
17
16

46

it doesn't go on full width. it's nice though – machineaddict Jul 03 '13 at 09:59
47

The solution I posted goes full width and creates 5 equal columns: [HERE IS THE ANSWER](http://stackoverflow.com/a/22799354/1799136). – Fizzix Apr 02 '14 at 00:28
5

Doesn't go full width like the answer @fizzix provides below. Makes an unwanted margin on both sides, like so - http://jsfiddle.net/wdo8L1ww/ – Fizzix Aug 27 '14 at 07:00
1

for those of you using less/sass with bootstrap 3, check [@lightswitch05 answer](http://stackoverflow.com/a/21142019/1859114) – ithil Oct 22 '15 at 10:59
2

**Bootstrap 4** 5 cols (full-width) requires no CSS or SASS: http://stackoverflow.com/a/42226652/171456 – Carol Skelly Feb 14 '17 at 12:51

lightswitch05 · Answer 3 · 2015-08-12T19:27:51.060

170

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.

edited Aug 12 '15 at 19:27

answered Jan 15 '14 at 15:52

lightswitch05

9,058
7
52
75

5

Cleanest solution, as `2.4` is a 5th of 12 (`2.4*5=12`), works for Bootstrap 3 in a 12-columns grid. Also applies to `make-xs`, `make-sm`, but it will not work combined to other standard col definitions (latest get priority) – Sherbrow May 23 '14 at 12:35
6

I'm shocked at the comparatively few upvotes for this answer. It's by far the least hacky, using not only the same naming convention as other Bootstrap column classes, but also the same mixins Bootstrap uses to create its own columns, making it probably future-proof until Bootstrap 4, at the very least. – Chris Fritz Aug 13 '14 at 03:45
3

This is supposed to be the best answer. I have created a library (to include `offset`, `pull` and `push`) based on this for my own use. Feel free to [check it out](https://github.com/kennyki/bootstrap-5-columns) – Kenny Ki Sep 11 '14 at 09:03
1

As everyone has said, yes this is now the correct answer. @Sherbrow said they "will not work combined to other standard col definitions" but this isn't because this solution is wrong in some way, its simply because 12%5 != 0. – Nick M Dec 11 '14 at 00:21
I would recommend using `make-xs-column` mixin, because this size will work for all screen sizes. – Denis Ivanov Apr 20 '15 at 02:25
Where do you add the mixin? Does this go right in the scss file? – tx291 Aug 17 '16 at 18:31
@bjorkland yes this can go right into your scss file if you are already correctly importing bootstrap scss – lightswitch05 Aug 17 '16 at 18:32
Shoot, I'm not importing bootstrap...just linking to the CDN manually (building a site in Jekyll) – tx291 Aug 17 '16 at 18:35
Thanks @lightswitch05 but what about this one? https://stackoverflow.com/questions/47858501/non-12-divisible-equal-columns-on-bootstrap-4 – candlejack Dec 17 '17 at 19:09
Is there an updated solution for Bootstrap 4? These mixins dont seem to exist anymore – Plog Feb 06 '18 at 15:23
@Plog nothing extra is required for 5 column layout in bootstrap 4. See Fizzix's [answer](https://stackoverflow.com/a/22799354/912563) for an example for bootstrap 4 – lightswitch05 Feb 06 '18 at 21:33
2

@lightswitch05 Unfortunately that wasn't suitable for me since I had a dynamic amount of columns. If I only had one column I still wanted it to be a 5th of the screen but using Fizzix's answer a single column would cover the whole screen. I managed to solve it using the new Bootstrap 4 mixin functions. I could update your answer to include this if you like? – Plog Feb 07 '18 at 11:32
@Plog please do, just make it clear its for boostrap 4 – lightswitch05 Feb 07 '18 at 14:58

Carol Skelly · Answer 4 · 2023-06-07T12:32:20.313

50

Bootstrap 5+ (update 2023)

Bootstrap 5 now has the row-cols-* classes which make it easy to get 5 columns...

<div class="row row-cols-5">
    <div class="col"> </div>
    <div class="col"> </div>
    <div class="col"> </div>
    <div class="col"> </div>
...
</div>

Demo

Bootstrap 4.1+ (update 2019)

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

edited Jun 07 '23 at 12:32

answered Feb 14 '17 at 12:48

Carol Skelly

351,302
90
710
624

2

Can't wait for it to be stable :) – nicolallias Mar 01 '17 at 16:40
2

Good but only works with rows of 5 elements. If you get more you are wrong. See my enhenced fiddle here : https://jsfiddle.net/djibe89/ntq8h910/ – djibe Jun 18 '18 at 19:14
That's why I explained you have to use the break every 5 columns. Your solution works but requires extra CSS. – Carol Skelly Jun 18 '18 at 19:18
Also consider adding `flex-nowrap` to the `.row` since the (automatic) columns could exceed the parent width. – Luuk Skeur Sep 19 '19 at 12:20
1

Adding a col-12 to break lines is genius because you can hide it at other screen sizes. For example, `
` will force them to be 5 items at larger screen sizes, but a normal list at smaller sizes. – Eliezer Berlin Jun 07 '23 at 08:11

score 32 · Answer 5 · edited Feb 19 '14 at 00:17

32

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

edited Feb 19 '14 at 00:17

sergserg

21,716
41
129
182

answered Aug 01 '13 at 23:00

plaidcorp

625
6
11

Where do I place this and how do I use it? – sergserg Aug 21 '13 at 20:04
2

@Serg 1. Place it below/ after the Bootstrap css file 2. Add the .fivecolumns class to the .row, then nest five columns with the class .col[,-sm,-lg]-2 – plaidcorp Aug 23 '13 at 00:28
Does not go perfect full width in some cases. – Fizzix Aug 12 '14 at 02:50
Why is col-xs-2 not added to the declarations? – ganders Jul 08 '15 at 13:30
@ganders just an over sight; check out another answer on this page: http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap#answer-22799354 – plaidcorp Jul 24 '15 at 11:26

machineaddict · Answer 6 · 2015-05-22T07:35:36.653

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/

score 11 · Answer 7 · answered Mar 18 '15 at 12:17

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

score 9 · Answer 8 · edited Jun 20 '20 at 09:12

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.

caub · Answer 9 · 2016-09-01T09:35:56.200

7

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>

edited Sep 01 '16 at 09:35

answered Nov 09 '15 at 18:12

caub

2,709
2
28
31

flexbox is better than bootstrap if it suits your needs. – ml242 Dec 16 '15 at 02:26

score 6 · Answer 10 · edited May 13 '13 at 16:32

6

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

edited May 13 '13 at 16:32

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jan 24 '13 at 08:12

Mafnah

87
1
2

1

that should be .equal .span2 { width: 20%; } – BrochanGuMor May 13 '13 at 16:05
... and it's NOT working. each column, except the first one, has margin left. – machineaddict Jul 03 '13 at 10:01

score 6 · Answer 11 · edited May 02 '14 at 15:40

6

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

edited May 02 '14 at 15:40

Paul D. Waite

96,640
56
199
270

answered May 13 '13 at 16:31

BrochanGuMor

710
1
9
16

1

The actual width is **17.94872%** and it is not responsive, you will have to set a new margin for each column in all the @media queries. – machineaddict Jul 04 '13 at 06:54

score 6 · Answer 12 · answered May 08 '16 at 20:48

6

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>

answered May 08 '16 at 20:48

agDev

855
10
20

This is the solution I chose for this issue. I believe this works well in bootstrap 3,4 and 5. – Andrew Magill Jul 07 '22 at 12:06

hossein naghneh · Answer 13 · 2021-09-27T19:16:50.633

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

score 6 · Answer 14 · answered Nov 09 '21 at 17:16

6

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

answered Nov 09 '21 at 17:16

Rajitha Udayanga

1,559
11
21

daGUY · Answer 15 · 2019-04-09T19:42:34.817

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>

djibe · Answer 16 · 2019-12-29T12:39:03.673

For Bootstrap 4.4+

Use the brand new row-cols-n classes.

Add row-cols-5 class to your .row div. No custom CSS needed.
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

Copy CSS below (awesome CSS by Bootstrap authors) and add it to your project
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%}}

score 4 · Answer 17 · edited Jul 25 '14 at 21:42

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.

score 4 · Answer 18 · answered Feb 28 '16 at 18:32

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>

score 3 · Answer 19 · answered Mar 12 '14 at 14:36

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

score 3 · Answer 20 · edited May 23 '17 at 12:02

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

score 3 · Answer 21 · answered Jun 17 '15 at 14:33

3

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

answered Jun 17 '15 at 14:33

herrfischer

1,768
2
22
35

Robind Kumar · Answer 22 · 2015-09-17T10:14:54.520

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>

score 3 · Answer 23 · answered Dec 21 '15 at 04:32

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>

score 3 · Answer 24 · answered Jul 12 '16 at 09:13

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

score 3 · Answer 25 · answered Mar 01 '17 at 16:38

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

GiorgosK · Answer 26 · 2017-11-03T12:42:16.903

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

score 3 · Answer 27 · answered Sep 07 '19 at 17:38

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>

score 2 · Answer 28 · answered Jul 08 '15 at 09:10

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

score 2 · Answer 29 · answered Mar 02 '16 at 06:53

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.

gonatee · Answer 30 · 2016-05-08T18:07:17.507

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

Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), the new element type (official - https://www.w3.org/TR/css-flexbox-1/)
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/"

score 2 · Answer 31 · answered Jun 06 '16 at 13:09

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

Vasyl Gutnyk · Answer 32 · 2019-09-10T06:59:37.107

2

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

edited Sep 10 '19 at 06:59

answered Nov 02 '16 at 16:36

Vasyl Gutnyk

4,813
2
34
37

Vedmant · Answer 33 · 2018-06-09T09:43:34.503

2

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

edited Jun 09 '18 at 09:43

answered Jun 09 '18 at 08:56

Vedmant

2,265
1
27
36

1

thanks, this was what I was looking for, i made 1-5ths 2-5ths etc and even 3-10ths etc now too, to have more flexibility, very convenient – morksinaanab Sep 27 '18 at 03:44

score 1 · Answer 34 · answered Dec 22 '14 at 09:38

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

score 1 · Answer 35 · answered Jan 21 '15 at 13:45

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

score 1 · Answer 36 · answered Jul 13 '15 at 16:51

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

score 1 · Answer 37 · edited Jan 29 '16 at 15:17

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

Please expand on this answer to explain the basics behind how it works. — misterManSam, Sep 18 '15 at 06:33
well 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. — Anand Pandey, Sep 18 '15 at 10:16

score 1 · Answer 38 · answered Feb 24 '16 at 11:37

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/

score 1 · Answer 39 · answered Sep 06 '18 at 12:27

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

Logan · Answer 40 · 2018-09-26T17:50:05.250

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

score 1 · Answer 41 · answered Mar 03 '19 at 13:01

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

score 1 · Answer 42 · answered Mar 02 '20 at 21:49

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>

score 1 · Answer 43 · answered Oct 20 '21 at 09:59

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

Floris · Answer 44 · 2022-05-09T13:48:45.707

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.

I named my class `.col-lg-5ths`. This is the best solution for MULTIPLES of 5, like 5, 10, 15, 20, 25, etc, with a 5-column layout but you have to use `@include media-breakpoint-up(lg) {` in bootstrap 4 — turkinator, Jun 11 '22 at 02:53

score 0 · Answer 45 · answered May 17 '21 at 17:37

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/bootstrap@5.0.1/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>

score 0 · Answer 46 · answered Jul 21 '22 at 21:11

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

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

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.

score -3 · Answer 47 · answered Jan 27 '15 at 08:27

-3

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!

answered Jan 27 '15 at 08:27

Tino Costa

1
1

It is not a good practice to rely on jquery for what we can achieve with Bootstrap. – Won Jun Bae Dec 03 '15 at 00:39