Optionally Remove the Gutter Padding from Columns

Bootstrap lets you customize and compile your own build based on your needs. This is anything from colors, container sizes, and to gutter padding size. However, sometimes you'll come across an instance where you just want a single row with no padding. Most cases you'll just individually select the column and kill off the padding with CSS. However, you can build your own utility class helper to do this on the fly. This utility class will cover all column sizes and still supports full responsiveness. Here's the CSS snippet:

.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }

And here's how you can use it in your HTML:

<div class="row no-gutter"> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> </div>

Lastly, here's a nice little demo of it on CodePen:

See the Pen Optionally Remove the Gutter Padding from Columns by Nicholas Cerminara (@ncerminara) on CodePen.