Twitter Bootstrap: No margin between columns

Question

I want to remove the margins between spans in bootstrap.

One idea would be to just overwrite the css properties with zero margin and padding. Here is an example: http://jsfiddle.net/kKEpY/3/

Without the exception that the left column floats into the the right one it would work but I would prefer a direct bootstrap solution. So does bootstrap provide a property which clears the margins of the columns (span-fluid)?

Regards

Answer 1

Above answers are really helpful, but my scenario is a little bit different.

I have a span4 and a span8 div in the html, the html code is like this:

<div class="row">
    <div class="span4">Content of span4</div>
    <div class="span8">Content of span8</div>
</div>

In order to do that, I should not only rewrite the margin-left to 0, but also have to customize the width of span4 and span8's. So here is the code that works for me:

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

  &.span8{
      width: 75%;
  }
  &.span4{
      width: 25%;
  }
}

Thanks for the inspiration!

Answer 2

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

Answer 3

Update : the solution below refers to an old version (< 2.1) : since v2.1 the fluid grid is automatically calculated from the normal grid dimensions - see variables.less on github

To obtain the same result, set @gridGutterWidth to 0 and set the @gridColumnWidthand @gridColumns as you see fit.

---

There, setting

• @fluidGridColumnWidth to 8.333333333% and
• @fluidGridGutterWidth to 0%

you can obtain that (jsfiddle).

Warning : the generator seems to put the rules based on your variables, and the default ones (which I removed on the jsfiddle).

Answer 4

I wanted to use span's with margin and span's without margin in my HTML. When using less this is very easy. Just create your own less file, name it something like "no-margin-span.less" and include it somewhere in the less code. After that you can use "no-margin-span5" instead of "span5" in your html file. This works the same with for example "no-margin-offset5" and "offset5". The "no-margin-span.less" file should have the following code:

#grid {
    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .no-margin-spanX (@index) when (@index > 0) {
          (~".no-margin-span@{index}") { .no-margin-span(@index); }
          (~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
          .no-margin-spanX(@index - 1);
        }
        .no-margin-spanX (0) {}

        .no-margin-offsetX (@index) when (@index > 0) {
          (~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
          .no-margin-offsetX(@index - 1);
        }
        .no-margin-offsetX (0) {}

        .no-margin-offset (@columns) {
          margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
          *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
        }

        .no-margin-span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
        }

        .no-margin-spanFirstChild (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .row-fluid {
            [class*="no-margin-span"] {
                .input-block-level();
                float: left;
                margin-left: 0;
            }

            // generate .no-margin-spanX and .no-margin-offsetX
            .no-margin-spanX (@gridColumns);
            .no-margin-offsetX (@gridColumns);
        }
    }
}

EDIT - To make this code responsive, add the following code to the "no-margin-span.less" file:

@media (max-width: 767px) {
    // Make all grid-sized elements block level again
    [class*="no-margin-span"],
    .uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"],
    [class*="no-margin-span"]:first-child,
    .uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"]:first-child {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        .box-sizing(border-box);
    }
    .no-margin-span12,
    .row-fluid .no-margin-span12 {
        width: 100%;
        .box-sizing(border-box);
    }
    .row-fluid [class*="offset"]:first-child {
        margin-left: 0;
    }

    // FORM FIELDS
    // -----------
    // Make no-margin-span* classes full width
    .input-large,
    .input-xlarge,
    .input-xxlarge,
    input[class*="no-margin-span"],
    select[class*="no-margin-span"],
    textarea[class*="no-margin-span"],
    .uneditable-input {
        .input-block-level();
    }
    // But don't let it screw up prepend/append inputs
    .input-prepend input,
    .input-append input,
    .input-prepend input[class*="no-margin-span"],
    .input-append input[class*="no-margin-span"] {
        display: inline-block; // redeclare so they don't wrap to new lines
        width: auto;
    }
    .controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
        margin-left: 0;
    }
}