Last Updated: September 09, 2019
·
20.35K
· sethrubenstein

Add padding to Bootstrap grid

I love Bootstrap, but the simple lack of padding in the spanX element makes it at times hard to work with if your content has a wrapper.

Thats a simple fix. Find the mixins.less file and find [class*="span"] and change it to...

[class*="span"] {
  float: left;
  min-height: 1px; // prevent collapsing columns
  .box-sizing(border-box);
  margin-left: @gridGutterWidth;
  padding-right: @gridGutterWidth;
}
.row [class*="span"]:first-of-type{
  padding-left: @gridGutterWidth;
}

Then in responsive-767px-max.less at [class="span"],
.row-fluid [class
="span"] add

padding-left: @gridGutterWidth;

4 Responses
Add your response

Interesting!

over 1 year ago ·

But i dont have any .less file in my bootstrap download,only 4 .css files and 2 .js files.....

over 1 year ago ·

@ramswaroop there're two versions of bootstrap stylesheets - CSS version and LESS css pre-processor - just check http://twitter.github.com/bootstrap/extend.html or bootstrap repo itself.

over 1 year ago ·

@wikiziner yes, i got your point. Have already done it. Thanks for answering. Actually i was totally new to Bootstrap.

over 1 year ago ·