How to do multiple spans twitter bootstrap without spacing between

Question

I'm trying to get 3 columns on a page without any spacing between them in bootstrap

here is what I get:

span fail

here is what I want:

span win

here is the code I'm currently using:

<div class="row">
    <div class="span4 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span4 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span4 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

I'm really not sure how to achieve what I want using bootstrap - any help appreciated

This question is similar to what is being asked here: http://stackoverflow.com/questions/16489307/how-to-remove-gutter-space-for-a-specific-div-only-bootstrap. Look for helpful answers, since the question also asks on how to remove the gutter (spaces between span divs), for a specific div or divs only. — GaryP, May 16 '13 at 02:28

score 31 · Answer 1 · answered May 23 '12 at 12:40

31

You can create your own class that removes that space in between your span grid elements like so:

CSS

.no-space [class*="span"] {
    margin-left: 0;
}

Then you can just include it inside the container .row div:

<div class="row no-space">
    <div class="span3 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span3 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span3 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

Also note that the .row container class removes 20px on the left side to accommodate the grid elements so you might have to remove that as well like so:

.no-space {
    margin-left:0;
}

So play around to see what works.

Demo: http://jsfiddle.net/G36uQ/

answered May 23 '12 at 12:40

Andres I Perez

75,075
21
157
138

9

This half works - it allows the boxes to sit next to each other, but then leaves a gap at the far right side - I can solve it by manually adding a width and making it !important, but I'm not sure that's the best way to go about it as it then requires all the @media queries to be changed. thank you though - best answer so far! – falter May 23 '12 at 13:47
4

@kevyn the space on the far right is the margin we removed from each `span` grid element, you can roll your own grid over at the [Customize](http://twitter.github.com/bootstrap/download.html) section of the bootstrap documentation page (`Grid system` section) with a gutter of zero pixels between the grid elements and simply just copy the resulting grid with the responsive calculations and place it inside your own css stylesheet, this way you can have an exact grid with proportionate widths. – Andres I Perez May 23 '12 at 13:53
1

this also breaks offsets, which are simply margin-left overrides on spans – zethus Aug 16 '12 at 20:46

score 16 · Answer 2 · edited May 24 '13 at 15:12

Complete class, overwritten .row-fluid with add .no-space.

/*
 * Bootstrap Grid System without space
 *
 * Overwrite Bootstrap grid system, removing margin
 * Usage : 
 * Simple add no-space class with row-fluid
 * <ul class="row-fluid no-space"> ... </ul>
 */
.row-fluid.no-space [class*="span"] {
  margin-left: 0%;
  *margin-left: -0.06944%;
}
.row-fluid.no-space [class*="span"]:first-child {
  margin-left: 0;
}
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] {
  margin-left: 0%;
}
.row-fluid.no-space .span12 {
  width: 99.99999999999999%;
  *width: 99.93055555555554%;
}
.row-fluid.no-space .span11 {
  width: 91.66666666666666%;
  *width: 91.59722222222221%;
}
.row-fluid.no-space .span10 {
  width: 83.33333333333331%;
  *width: 83.26388888888887%;
}
.row-fluid.no-space .span9 {
  width: 74.99999999999999%;
  *width: 74.93055555555554%;
}
.row-fluid.no-space .span8 {
  width: 66.66666666666666%;
  *width: 66.59722222222221%;
}
.row-fluid.no-space .span7 {
  width: 58.33333333333333%;
  *width: 58.263888888888886%;
}
.row-fluid.no-space .span6 {
  width: 49.99999999999999%;
  *width: 49.93055555555555%;
}
.row-fluid.no-space .span5 {
  width: 41.66666666666666%;
  *width: 41.597222222222214%;
}
.row-fluid.no-space .span4 {
  width: 33.33333333333333%;
  *width: 33.263888888888886%;
}
.row-fluid.no-space .span3 {
  width: 24.999999999999996%;
  *width: 24.930555555555554%;
}
.row-fluid.no-space .span2 {
  width: 16.666666666666664%;
  *width: 16.59722222222222%;
}
.row-fluid.no-space .span1 {
  width: 8.333333333333332%;
  *width: 8.263888888888888%;
}
.row-fluid.no-space .offset12 {
  margin-left: 99.99999999999999%;
  *margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset12:first-child {
  margin-left: 99.99999999999999%;
  *margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset11 {
  margin-left: 91.66666666666666%;
  *margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset11:first-child {
  margin-left: 91.66666666666666%;
  *margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset10 {
  margin-left: 83.33333333333331%;
  *margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset10:first-child {
  margin-left: 83.33333333333331%;
  *margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset9 {
  margin-left: 74.99999999999999%;
  *margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset9:first-child {
  margin-left: 74.99999999999999%;
  *margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset8 {
  margin-left: 66.66666666666666%;
  *margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset8:first-child {
  margin-left: 66.66666666666666%;
  *margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset7 {
  margin-left: 58.33333333333333%;
  *margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset7:first-child {
  margin-left: 58.33333333333333%;
  *margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset6 {
  margin-left: 49.99999999999999%;
  *margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset6:first-child {
  margin-left: 49.99999999999999%;
  *margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset5 {
  margin-left: 41.66666666666666%;
  *margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset5:first-child {
  margin-left: 41.66666666666666%;
  *margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset4 {
  margin-left: 33.33333333333333%;
  *margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset4:first-child {
  margin-left: 33.33333333333333%;
  *margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset3 {
  margin-left: 24.999999999999996%;
  *margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset3:first-child {
  margin-left: 24.999999999999996%;
  *margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset2 {
  margin-left: 16.666666666666664%;
  *margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset2:first-child {
  margin-left: 16.666666666666664%;
  *margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset1 {
  margin-left: 8.333333333333332%;
  *margin-left: 8.194444444444443%;
}
.row-fluid.no-space .offset1:first-child {
  margin-left: 8.333333333333332%;
  *margin-left: 8.194444444444443%;
}

Usage:

<ul class="media-list row-fluid no-space">
  <li class="media span4">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
  <li class="media span4">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
  <li class="media span4">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Demo on Bootply

Thanks!! (I know it's lame to comment with a simple "thanks", but it also let other people know this is the right answer) — Benjamin Bouchet, Aug 13 '13 at 14:15
Thanks for this. I know that this is an old answer/question and that bootstrap is currently in v3. Just wanted to note that if you use this it will break the responsiveness, eg `spanX` in `row-fluid` will convert to `width: 100%` after a certain window size. To maintain this responsiveness you can wrap this class in a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) (`@media`).. I think the 'jump' is at 767px, thus: `@media (min-width: 767px){ }`. — , Feb 04 '16 at 17:11
Much like MeRuud says this breaks responsiveness, an alternative fix is to below this in your css add: `@media (max-width: 767px) { .row-fluid.no-space [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }` — jjr2000, Oct 06 '16 at 14:07

score 11 · Answer 3 · answered Apr 21 '13 at 17:08

I added: offset0 for this exact reason

.row-fluid .offset0 {
    margin-left: 0
}
.row-fluid .span12.offset0 {
  width: 99.99999999999999%;
  *width: 99.93055555555554%;
}
.row-fluid .span11.offset0 {
  width: 91.66666666666666%;
  *width: 91.59722222222221%;
}
.row-fluid .span10.offset0 {
  width: 83.33333333333331%;
  *width: 83.26388888888887%;
}
.row-fluid .span9.offset0 {
  width: 74.99999999999999%;
  *width: 74.93055555555554%;
}
.row-fluid .span8.offset0 {
  width: 66.66666666666666%;
  *width: 66.59722222222221%;
}
.row-fluid .span7.offset0 {
  width: 58.33333333333333%;
  *width: 58.263888888888886%;
}
.row-fluid .span6.offset0 {
  width: 49.99999999999999%;
  *width: 49.93055555555555%;
}
.row-fluid .span5.offset0 {
  width: 41.66666666666666%;
  *width: 41.597222222222214%;
}
.row-fluid .span4.offset0 {
  width: 33.33333333333333%;
  *width: 33.263888888888886%;
}
.row-fluid .span3.offset0 {
  width: 24.999999999999996%;
  *width: 24.930555555555554%;
}
.row-fluid .span2.offset0 {
  width: 16.666666666666664%;
  *width: 16.59722222222222%;
}
.row-fluid .span1.offset0 {
  width: 8.333333333333332%;
  *width: 8.263888888888888%;
}

Thanks, this is what i was looking for, as this was what i tried to do, following the "standard" bootstrap logic. — doterobcn, Sep 11 '13 at 21:44
This needs to be part of bootstrap :p. i edited it so row-fluid.offset0 was all that needed specifying. — encodes, Dec 19 '13 at 12:36

score 7 · Answer 4 · answered May 23 '12 at 11:19

7

The column spacing you see is an intent of the grid system.

If you wish not to have spaces between columns you should style these elements directly and not use the grid layout styling.

answered May 23 '12 at 11:19

Jon Cram

16,609
24
76
107

it can be a lot more work to re-build everything rather than just edit the margin in the CSS under 5 minutes... – vsync Aug 20 '13 at 09:30

score 1 · Answer 5 · answered May 23 '12 at 11:24

1

If you are using the less files to produce the bootstrap css, set the @gridGutterWidth to 0 inside the variables.less file. Otherwise, I suppose it's a real pain to change all the margins and paddings on the css file.

answered May 23 '12 at 11:24

periklis

10,102
6
60
68

score 1 · Answer 6 · answered May 27 '13 at 14:06

If you check the grid.less file in bootstrap, the span* grid is defined in a simple mixin:

#grid > .core(@gridColumnWidth, @gridGutterWidth);

To build a span* grid without spaces you can use in less:

.my-nospace-grid {
    #grid > .core(78px, 0px);
}

This will give 12*78px = 936px.

To choose Your values, check the default sizes defined in variables.less:

// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

score 1 · Answer 7 · answered Jun 17 '13 at 13:27

I had the exact same problem as you do, so here's how I got through this on the latest Bootstrap version 2.3.1:

First you need to add a "no-space" class to the parent div with class "row" like this:

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

Then you modify your css according to number of elements you want in that row, like this:

.no-space [class*="span"]{
  margin-left: 0 !important;
  width: 25% !important; // This is for 4 elements ONLY in the row
}

The math for the width is:

100 / number of elements in the row = width.

In my case it was 4 elements so it's:

100 / 4 = 25%;

If it was 3 elements it would be:

100 / 3 = 33.3333333333%;

If you have multiple cases in a project with this issue, you might want to add a unique id or class to the css rule so it won't affect them all.

That's it. No need to redownload the bootstrap and to deal with source files
PS: This method works in responsive design as well ;)

score 0 · Answer 8 · answered Sep 12 '12 at 17:31

I have a row with two columns. For three, adjust accordingly. And I added this to my .css which loads after and thus overrides the bootstrap.css.

 .no-space { /*apply to the row */
      left-margin:0;
 }


 .row-fluid .span6 {  /* overrides bootstrap.css to allow for no gutter */
   /* width: 48.051948051948045%;
   *width: 48.008658008658%; */

   width: 50%;
   *width: 50%;
 }

And the html is:

 <div class="row-fluid no-space"> <!-- r -->

            <div class="span6">
                <h4 class="titles">xxx</h4>
                <img src="img/system/xxx.png">
            </div> 

            <div class="span6">
                <h4 class="titles">xxx</h4>
                <img src="img/system/xxx.png">
            </div> 


  </div><!--/r-->

Now, I have two columns at 50% width with no gutter between.

Naturally, you can create your own class instead of just over riding the bootstrap class. Also, you can create spans of any width using: myspan number / number of columns. So, if you have 12 columns and want a 5 span its just 5/12 to give you the percent for the width. — Slopeside Creative, Sep 14 '12 at 18:56

score 0 · Answer 9 · answered May 09 '13 at 12:09

In general, if you still want to keep the gutter, but just want to narrow or widen it without creating gaps at the far right, then just make sure that the relevant margins and widths add to 100%, bearing in mind that a margin is not applied to the leftmost span. So for your 3 column layout, if you wanted, say, a 0.5% gutter, then choose 3*33% + 2*0.5% = 100%

.row-fluid .span4 {
    width: 33%;
    margin-left: 0.5%;
}

Pubudu Danushka · Answer 10 · 2013-05-31T11:45:47.477

 <div>
        <div class="container">
        <div class="row">
            <div class="span12">

                <div class="row">
            <div style="background:#000;" class="span6">testcont 1</div>
            <div style="background:#000;" class="span6">testcont 2</div>
            <div style="background:#000;" class="span6">testcont 3</div>
            <div style="background:#000;" class="span6">testcont 4</div>
                </div>
            </div>
            </div>
        </div> 
    </div>

score 0 · Answer 11 · answered Mar 31 '14 at 15:37

0

Here is an example of equal width columns with and without spaces: http://codepen.io/ngeorgiev/pen/Lgxin/

answered Mar 31 '14 at 15:37

Nikolay Georgiev

1,047
1
12
22

How to do multiple spans twitter bootstrap without spacing between

11 Answers11