Bootstrap 3 grid with no gap

Question

I am trying to create a 2 column grid, with literally a 50% with no margins or padding.

How do I achieve this with Bootstrap 3 I tried this but end up with negative margins at tablet/desktop break points:

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 offset-0">Col 1</div>
        <div class="col-sm-6 offset-0">Col 2</div>
    </div>
</diV>

CSS

.container {
    background: green;
    overflow: hidden;
}
.row > * {
    background: blue;
    color: #fff;
}
.row :first-child {
    background: red;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}

DEMO - http://jsfiddle.net/pjBzY/

yes there are negative margins but still the content is filling 100% of the container — omma2289, Aug 13 '13 at 06:41
I updated the fiddle without the text align center so that you can better see what the issue is — John Magnolia, Aug 13 '13 at 06:43

score 58 · Answer 1 · answered Aug 13 '13 at 17:37

58

Another option would be to create your own special CSS class for whenever you want to apply the "gutterless" columns..

HTML

<div class="container">
    <div class="row no-gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS

.no-gutter [class*="-6"] {
    padding-left:0;
}

Demo: http://bootply.com/73960

answered Aug 13 '13 at 17:37

Carol Skelly

351,302
90
710
624

5

This example shows what you have here doesn't really work, you need to remove the negative margin from row: http://www.bootply.com/132839 – John Magnolia Apr 25 '14 at 11:31
6

This will only work for 6 column grids, best to use class*="col-" to work for all. – martinedwards Jun 19 '15 at 14:05

martinedwards · Answer 2 · 2015-06-19T14:02:58.890

28

I always add this style to my Bootstrap LESS / SASS:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Then in the HTML you can write:

<div class="row row-no-padding">

edited Jun 19 '15 at 14:02

answered May 19 '14 at 15:48

martinedwards

5,577
1
33
35

3

This only worked for me after I removed the outer `{}`. I like this solution better because it selects by `col` keyword, rather than a specific column width. – jlewkovich Dec 02 '14 at 19:06
2

Just so you know : the code provided is not CSS, it's LESS, that is why you had to remove the outer {} – Scalpweb Jun 18 '15 at 16:23

omma2289 · Answer 3 · 2013-08-13T06:56:14.133

8

You'd need to override the negative margins from the .row in large screens either directly or with a custom class

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Updated fiddle

edited Aug 13 '13 at 06:56

answered Aug 13 '13 at 06:49

omma2289

54,161
8
64
68

This could potentially break other scripts which might require the margin. The margin is useful in some cases but there also needs to be a way of removing it – John Magnolia Aug 13 '13 at 06:53
you can always use a custom class (like you did in your answer) – omma2289 Aug 13 '13 at 07:06

score 5 · Answer 4 · answered Aug 13 '13 at 06:53

5

I am sure there must be a way of doing this without writing my own CSS, its crazy I have to overwrite the margin and padding, all I wanted was a 2 column grid.

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

answered Aug 13 '13 at 06:53

John Magnolia

16,769
36
159
270

I guess Bootstrap believes you would normally want the padding between columns (so content doesn't end up touching) and therefore yours is more of a custom need, one that you can meet by adding a couple extra rules to your CSS, which I don't think it's that bad – omma2289 Aug 13 '13 at 17:24
Why not create a div class with `width:50%`? That's all you need! A class with a single property. – edsioufi Aug 13 '13 at 22:41
@koala_dev I just think it should be the other way round, default no padding and only add it if you need it – John Magnolia Aug 19 '13 at 10:55
@edsioufi I may wish to increase the number of columns – John Magnolia Aug 19 '13 at 10:55
Thank you for including a jsFiddle. Always better. – Marc M. Sep 22 '13 at 01:29

keithjgrant · Accepted Answer · 2013-11-14T15:14:10.463

The grid system in Bootstrap 3 requires a bit of a lateral shift in your thinking from Bootstrap 2. A column in BS2 (col-*) is NOT synonymous with a column in BS3 (col-sm-*, etc), but there is a way to achieve the same result.

Check out this update to your fiddle: http://jsfiddle.net/pjBzY/22/ (code copied below).

First of all, you don't need to specify a col for each screen size if you want 50/50 columns at all sizes. col-sm-6 applies not only to small screens, but also medium and large, meaning class="col-sm-6 col-md-6" is redundant (the benefit comes in if you want to change the column widths at different size screens, such as col-sm-6 col-md-8).

As for the margins issue, the negative margins provide a way to align blocks of text in a more flexible way than was possible in BS2. You'll notice in the jsfiddle, the text in the first column aligns visually with the text in the paragraph outside the row -- except at "xs" window sizes, where the columns aren't applied.

If you need behavior closer to what you had in BS2, where there is padding between each column and there are no visual negative margins, you will need to add an inner-div to each column. See the inner-content in my jsfiddle. Put something like this in each column, and they will behave the way old col-* elements did in BS2.

jsfiddle HTML

<div class="container">
    <p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
    <div class="row">
        <div class="col-sm-6 my-column">
            Col 1
            <p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
        </div>
        <div class="col-sm-6 my-column">
            Col 2
        </div>
    </div>
</div>

and the CSS

.row {
    border: blue 1px solid;
}
.my-column {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-column:first-child {
    background-color: red;
}

.inner-content {
    background: #eee;
    border: #999;
    border-radius: 5px;
    padding: 15px;
}

Nicely explained but the issue was the opposite to the solutions you have provided. I want a simple grid with no gaps or negative margins. Then if padding is needed it can easily be added inside the cols if required. — John Magnolia, Apr 25 '14 at 11:24

score 4 · Answer 6 · answered Sep 30 '15 at 23:12

Generalizing on martinedwards and others' ideas, you can glue a bunch of columns together (not just a pair) by adjusting padding of even and odd column children. Adding this definition of a class, .no-gutter, and placing it on your .row element

.row.no-gutter > [class*='col-']:nth-child(2n+1) {
    padding-right: 0;
 } 

.row.no-gutter > [class*='col-']:nth-child(2n) {
    padding-left: 0;
}

Or in SCSS:

.no-gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}

This answer should get more attention! – Peter May 03 '16 at 09:09 — Peter, May 03 '16 at 09:09

score 3 · Answer 7 · edited May 23 '17 at 12:26

3

The answer given by @yuvilio works well for two columns but, for more than two, this from here might be a better solution. In summary:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

edited May 23 '17 at 12:26

Community

1
1

answered Oct 23 '15 at 10:02

starfry

9,273
7
66
96

Hey! Thanks for linking to my article :) – JulienMelissas Dec 03 '15 at 23:00

score 1 · Answer 8 · answered Jan 31 '14 at 16:52

1

Use "clearfix" instead of "row". It does the exact same except it doesn't have a negative margin. Step through the "row" usage and you'll see that's the only difference.

answered Jan 31 '14 at 16:52

Kyle

387
3
3

xzegga · Answer 9 · 2013-08-13T07:13:22.240

0

The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 3 sizes. Tiny (for smartphones .col-), Small (for tablets .col-sm-) and Large (for laptops/desktops .col-lg-*). The 3 grid sizes enable you to control grid behavior on different devices (desktop, tablet, smartphone, etc..).

Unlike 2.x, Bootstrap 3 does not provide a fixed (pixel-based) grid. While a fixed-width layout can still be acheived using a simple custom wrapper, there is now only one percentage-based (fluid) grid. The .container and .row classes are now fluid by default, so don't use .row-fluid or .container-fluid anymore in your 3.x markup.

Source

edited Aug 13 '13 at 07:13

answered Aug 13 '13 at 07:07

xzegga

3,051
3
25
45

we're dealing with Bootstrap 3 here, there is no `row-fluid` anymore – omma2289 Aug 13 '13 at 07:11
Sorry I don't see the "3" in question, I have edit my answer to use Bootstrap 3 – xzegga Aug 13 '13 at 07:14

score 0 · Answer 10 · answered Jun 16 '16 at 05:40

Simple you can use bellow class.

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 nopadmar">Your Content<div>
       <div class="col-md-6 nopadmar">Your Content<div>
  </div>
</div>

Bootstrap 3 grid with no gap

10 Answers10

Linked