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   lt div class  container  gt       lt div class  row  gt           lt div class  col-sm-6 offset-0  gt Col 1 lt  div gt           lt div class  col-sm-6 offset-0  gt Col 2 lt  div gt       lt  div gt   lt  diV gt    CSS   container       background  green      overflow  hidden     row  gt          background  blue      color   fff     row  first-child       background  red     offset-0       padding-left  0      padding-right  0      DEMO - http   jsfiddle net pjBzY

User · Answer

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

User · Answer

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

User · Answer

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  gt          padding-left  0      padding-right  0      http   jsfiddle net KxCkD

User · Answer

Simple you can use bellow class    x000D   x000D   nopadmar   x000D     padding  0  important  x000D     margin  0  important  x000D    x000D   lt div class  container-fluid  gt  x000D     lt div class  row  gt  x000D       lt div class  col-md-6 nopadmar  gt Your Content lt div gt  x000D          lt div class  col-md-6 nopadmar  gt Your Content lt div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  container  gt       lt p class  other-content  gt 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  lt  p gt       lt div class  row  gt           lt div class  col-sm-6 my-column  gt              Col 1              lt p class  inner-content  gt Inner content - THIS element is more synonymous with a Bootstrap 2 col-   lt  p gt           lt  div gt           lt div class  col-sm-6 my-column  gt              Col 2          lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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      amp   gt   class   col-       amp   gt   class    col-         padding-right  0      padding-left  0

User · Answer

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

User · Answer

Another option would be to create your own special CSS class for whenever you want to apply the  gutterless  columns    HTML   lt div class  container  gt       lt div class  row no-gutter  gt           lt div class  col-6 col-sm-6 col-lg-6  gt Col 1 lt  div gt           lt div class  col-6 col-sm-6 col-lg-6  gt Col 2 lt  div gt       lt  div gt   lt  div gt    CSS    no-gutter  class   -6         padding-left 0      Demo  http   bootply com 73960

User · Answer

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

User · Answer

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    lt div class  row row-no-padding  gt

[css] Bootstrap 3 grid with no gap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3