Julien Melissas

No Gutter Column Trick for Bootstrap

Introduction

Julien Melissas

Julien Melissas

I'm a Web Developer, Foodie, and Music Lover/Maker living in Asheville, NC. I make things on the web at Craftpeak & JM Labs.


LATEST POSTS

fRamen: “Fancy” Instant Ramen 16th October, 2017

Nomading 2016: I suck at travel blogging – London & Berlin 20th June, 2017

Code

No Gutter Column Trick for Bootstrap

Posted on .

Recently I had a need to have a default grid in Bootstrap, but also on the homepage I needed to have 4 boxes that butted right up against each other. I came up with a handy .no-gutters class, which has some pretty basic CSS, that you apply to your .row tag holding your columns.

Regular Bootstrap version below (with kittens!):

See the Pen chmav by Julien Melissas (@JulienMelissas) on CodePen.0

 

No gutters:

Now here’s our code for the .no-gutters class:


.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

You’ll just want to copy that into your stylesheet and then use the .no-gutters class on your .row div like so:


<div class="row no-gutters">
  <div class="col-xs-6 col-sm-3 kitten-box">
    <img src="http://placekitten.com/g/600" alt="kittens" />
  </div>
  ...
</div>

And a working example:

See the Pen kKqfD by Julien Melissas (@JulienMelissas) on CodePen.

So that’s it. Super Simple, super easy to use. Enjoy!

 

Update:

In response to a comment below asking about how to take these no-gutters from edge to edge, I made another example, without the container class. Check it out:

0

 

Update 2:

The other day when adding this code to another project I realized that it effected every column inside a row with the .no-gutters class, which could be bad. I just updated all of the code in the post to include a > so that it only effects the columns directly beneath a row.

Update 3: CSS Preprocessors

For those who want preprocessor support, the regular code above will work, but in case you want the shortened version the following should work in both Less and Sass (Scss style):


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

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

Note: according to Julien’s comment below (not me), SCSS users don’t need the ampersands.

(Less codepen link)

Julien Melissas

Julien Melissas

http://www.julienmelissas.com

I'm a Web Developer, Foodie, and Music Lover/Maker living in Asheville, NC. I make things on the web at Craftpeak & JM Labs.

  • Also handy: the make-xx-column mixin for getting rid of gutters. So if you set columns in your LESS instead, you could do .kitten-box { .make-sm-column(3,0); }

    • Julien Melissas

      Great point!

    • xavier

      I forgot this gutter parameter, less code more less.

  • Thanks for this tutorial. It came in handy! Wondering how I also get rid of the margins at the edge of the images – extending the image grid right to the edge of the screen?

    • Julien Melissas

      Hey Kiara, thanks for reading!

      By default, the container class has a gutter on each side of the screen. If it works for your layout, you can just skip the container div and start directly with the .row class. Check out this example: http://codepen.io/JulienMelissas/pen/gFwcJ

      Hope that helps! Let me know if you have any other questions.

      • That was a fast reply! Thanks. It’s working great 🙂

        • Julien Melissas

          Web developers never sleep 😉 glad it worked out, have a good one.

  • Alberto Jacini

    Thanks Julien, this was very useful!

    • Julien Melissas

      Thanks for reading, glad I could help!

  • Dragan Vukicevic

    Very elegant, very simple, thanks for sharing!

    • Julien Melissas

      Thanks!

  • Hi Julien, is there a specific reason why you choose to dismiss the .container class instead of using .container-fluid?

    • Julien Melissas

      Hey Jentan, do you mean on the edge-to-edge example? If so, yes, it’s because .container-fluid still has a 15px gutter on each side. If you mean for the other ones, no reason. I personally usually use .container more than .container-fluid because I do like sites to “stop getting bigger” on really huge screens, unless they’re really using that space, and Bootstrap doesn’t by default have a lot of breakpoints for screens that large.

      • Julien, I meant the edge-to-edge example. What I normally do is just create a .pad0 and add it where I want to remove padding but your solution works flawless too. Thanks for reply and sharing your thoughts on the other ones. 😉

  • satinflame

    This is perfect, thank you for making it so easy to implement.

    • Julien Melissas

      Absolutely. Thanks for checking it out!

  • Thanks for the code snippet :-). Added it to my code arsenals. Has been helpful…

    • Julien Melissas

      Totally! Glad it helped.

  • dsalvagni

    So simple and so useful. Thanks, dude.

    • Julien Melissas

      Glad it helped. I use it all the time too 🙂

  • Jacob Harris

    Thanks man really helpful Thumbs Up

    • Julien Melissas

      No problem, dude.

  • nmeagher23

    This was exactly what I was looking for! Thanks man!

    • Julien Melissas

      It looks like Google is doing a good job then 😉 glad it helped.

      • nmeagher23

        Seems so. Great blog man, super clean. Personally I think this should be adding to the Bootstrap core.

  • Thx for the great snippet.

    According to scss-lint, the ampersand chars are not needed

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

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

    • Julien Melissas

      Thanks for the note! I didn’t lint the SCSS when I tested it. I’m going to leave it there, so that both LESS and SCSS users can copy/paste, but I’ll add a note there.

      PS: Cool name 😉

      • Lol, I hadn’t noticed our names were so similar !

  • Ben

    Hey, Julien,

    Great blog. I’m a front end developer in Louisville, Ky. Nice to meet you.

    • Julien Melissas

      Hey there Ben! Sorry I’m just getting back to you now – thanks for the compliment!

  • Camiel Moonen

    Works great, thanks!

    • Julien Melissas

      yay!

  • always nice when someone else figures stuff out for you!

  • Ahmed Mahmoud

    Amazing 🙂

    • Julien Melissas

      I try 😉

  • works fine

    • Julien Melissas

      I’ll take “fine”! 😉

  • Sharif khalid

    awesome <3 bootstrap

    • Julien Melissas

      Me too!

  • Nestor Mendoza

    thank you so much!

    • Julien Melissas

      You’re welcome!

  • Tracey Johnson

    So when I use this the vertical gutters are eliminated, but not the horizontal ones. A screen shot of my css, html and resulting screen are attached.

    • Tracey Johnson

      I found the answer to my question. The extra padding was coming from the images. Once I set the image padding to 0px it worked great.

      • Julien Melissas

        Tracey, glad to hear you figured it out! This post doesn’t touch on the margin or padding horizontally, but I guess I could add something about that. My only suggestion with your code would be to simplify all your code to use the `padding` and `margin` shorthands:
        `padding: 0;`
        `margin: 0;`

        – just cause it seems a little easier to rear 😉

  • solodev

    Nice work!

  • Josh

    Doesn’t work for me. Still got a gutter :/

    Here’s my code:

    Movies

    Quizzes

    .tile{
    background: url(../img/grid/bg.png) no-repeat center center;
    background-width: initial;
    background-height: initial;
    width: initial;
    height: initial;
    }

    • Josh

      Good luck reading that. Damn formatting.

    • Julien Melissas

      Hate to point out the obvious, but it’s `.no-gutters` not `.no-gutter` – if that still doesn’t work let me know and we’ll go from there.

      • Josh

        Oh yeah…
        Thanks for pointing that out!
        I also found another method. By searching in bootstrap.min.css, there’s a rule you can search for: row{padding-left:15%;padding-right:15%;}. Just delete that rule and you’re good to go.
        Thanks for your help, much appreciated. 🙂

        • Julien Melissas

          No problem.

          BTW – if you’re using something like Bower or compiling the Bootstrap Sass yourself (that’s what I do), going into the minified code and deleting isn’t an option 😉 – and if you ever want to update Bootstrap, you’d have to go back and do that change again.

          Also, if you want to have some parts on the site with the gutter, adding the no-gutters class lets you have either or, so you’re not married to either. A good example of that is a site with a media grid that has no gutters, but normal content areas that do!

          Either way, whatever works for you, works, I just wanted to point out some upsides and downsides to the different approaches for you and the other readers.

          • angelia

            Helo julien i really cant figureout how i remove space from 4 images using bootstrap…plzz if u help me to figure out this .. so i will thankfull to u .

          • angelia

            Because bootstap has its own CSS file…

  • Signo

    Kudos to you man!
    +++

  • Perfectly, solved my problem form me. Thanks

  • TWyPGn

    Thanks Julien for the trick. I need to remove the horizontal space between the rows. Could you please help with that? Thank you!
    P.S. Im a novice in bootstrap

  • Shaimoom Newaz

    Thanks Julien. Need this for a project now and please to see you provided the solution. Viva la Roots! 😉

    • Julien Melissas

      Hey dude! WAZZZAP. Roots 4 life.

View Comments (57) ...
Navigation