5 Equal Spans in 1 Row - Twitter Bootstrap

Question

Using the fluid grid layout I can get 4 equal spans:

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

Or I can get 6 equal spans:

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

But how do I get 5 equal spans?

score 14 · Answer 1 · edited Mar 20 '14 at 05:16

I have followed bootstraps methods for calculating widths and have come up with the following. You will want to follow the HTML structure of as follows:

<div class="row-fluid-5">
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>

Then, after you load bootstrap.css and bootstrap-responsive.css, load your custom.css file with the following:

/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 1.875%;
   *margin-left: 1.875%;

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span2 {
   width: 18.5%;
   *width: 18.5%;
 }

 /* responsive ONLY */

 @media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }
 }

Check out the demo below to see how it works.

DEMO

score 3 · Accepted Answer · answered Feb 27 '13 at 04:15

3

Considering that by default bootstrap is 12 columns, you cannot mathematically get 5 equal spans.

However, if you really need to (bad idea, more on that in a second), you can customize your bootstrap download to have 15 columns.

http://twitter.github.com/bootstrap/customize.html

Change the @gridColumns variable to 15, then use 5 columns all with a span3.

It is a bad idea though. Bootstrap is 12 columns because 12 works well. Using 12 gives you support for 1/4, 1/3, and 1/2 width columns. With a 15 column layout, you will only have support for 1/3rd width (and a lot of strange other sizes). Your call though, the setting is there.

answered Feb 27 '13 at 04:15

Mike Robinson

24,971
8
61
83

yes, it's a bad idea. i've found a different answer which is working and have the default 12 columns bootstrap. read [this](http://stackoverflow.com/a/14496611/1057527) and after that, [this](http://stackoverflow.com/a/16526908/1057527) – machineaddict Jul 03 '13 at 10:05
2

“It is a bad idea though.” Not if your design works with 5 columns. – Paul D. Waite May 02 '14 at 15:35
@PaulD.Waite The great thing about 12 is you can stack half, one-third, one-fourth, and one-sixth width columns. With 15 columns, you can only have one-third and one-fifth width columns. You have less options when trying to build equal width layouts. – Mike Robinson May 02 '14 at 19:40
4

@MikeRobinson: yup, I know. Still not a bad idea if the design works. – Paul D. Waite May 02 '14 at 22:30

score 1 · Answer 3 · answered Feb 27 '13 at 04:16

1

You need to generate custom grid (e.g. 10). There is no way to create 5 equal raws in 12 column grid

answered Feb 27 '13 at 04:16

Daniil Ryzhkov

7,416
2
41
58

score 1 · Answer 4 · answered Aug 12 '15 at 17:17

Or you could add this to your css (or the bootstrap.css) - This is my preferred way to solve this. The "15" used to throw me a little bit, but just try to remind yourself it's 1/5th.

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

Then just use it like you would any other bootstrap class.

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

score 0 · Answer 5 · answered Feb 27 '13 at 04:12

0

Well, that is mathematic. Not a real CSS/Bootstrap problem...

You'll not be able to create 5 equal spans within a row because the default grid columns of Bootstrap is 12, and 12 / 5 = 2.4.

answered Feb 27 '13 at 04:12

gustavohenke

40,997
14
121
129

score 0 · Answer 6 · answered Feb 27 '13 at 05:22

I would have converted this into a 10/2 = 5 problem by creating a fluid row of span10 and then having child fluid rows with span2 children. The following works:

<div class="container-fluid">
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
</div> <!-- /container -->

The parent element won't span the full width of the document though? — colmtuite, Feb 27 '13 at 11:51

score 0 · Answer 7 · edited Jan 14 '16 at 00:10

.span3 {   width: 220px; }
.span2 {   width: 140px; }

or

.row-fluid .span3 {   width: 23.404255319148934%;   *width:
23.351063829787233%; }

.row-fluid .span2 {   width: 14.893617021276595%;   *width:
14.840425531914894%; }

Those are only provided width of element, you should be able to simply add

class="span" style="width:180px"

or

class="span" style="width:19.1488%"

You need to add class span cos bootstrap need those for .row works.

5 Equal Spans in 1 Row - Twitter Bootstrap

7 Answers7