Twitter Bootstrap 3 Removing RIGHT margin and padding on a row and col-12

Question

I'm using Twitter Bootstrap 3.0 LESS source in my Asp.Net MVC 5 project. I use a Top Navbar (as given here) and then few more rows in the the layout page.

I use following for rows to take 100% page width:

<div class="row">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

But this adds an extra padding on the right of each row. This also adds a horizontal scrollbar to the page and a blank vertical gutter throughout the page is visible when scrolled the page to its right.

Removing margin-right on each row and padding-right on all col-md-12 corrects the layout. However, I don't feel this is the correct way to do it.

Any idea how to remove those unnecessary margin and padding on right once for all, throughout the resultant bootstrap.css?

Answer 1

Your problem is caused by NOT wrapping your .rows in a .container class.

Try this:

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

The width:100%; on your .container will make the rows 100% (red). The will still be a padding around your content (yellow). This padding is the gutter of the grid, see: https://stackoverflow.com/a/19044326/1596547

No, this does not help. The padding-right on col-md-12 still prevails. I seek something generic implemented in .less source for any column type (col-*-12)!

All col-*-* have a padding of 15px on both sides. There is no difference between the *-12 classes except from the *-12 classes don't have a float left.

css / less selector for all your col-* classes:

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

css / less selector for all your col-*-12 classes:

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}