Twitter Bootstrap 3 Removing RIGHT margin and padd

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

You would have to go into bootstraps source code, find the .row selector, and change the css associated with.

This is probably not what you want to do.

Instead, I would recommend creating your own selector to use for this type of row you want. If you were to do this though, you couldn't call it .row because it would conflict with .row selector used by bootstrap. You'd have to call it something like .custom-row

Answer 2

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

Answer 3

The easiest way to solve this problem is to comment out left and right padding from all columns, set left and right padding on container class to 0 and to remove a negative margin from rows.

Just comment out .row class at line 691 and at line 714 comment out code for left and right padding on class^="col-".

That's works for me:

.container {
     padding-right: 0;
     padding-left: 0; 
     margin-right: auto;
     margin-left: auto;
}

.row {
   /*margin-right: -15px;
    margin-left: -15px;*/
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        position: relative;
        min-height: 1px;
        /*padding-right: 15px;
        padding-left: 15px;*/
}

Answer 4

As mentioned above the first thing to do is have matching container and row classes:

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

To remove that padding, you could then use some css like so:

div.container.tight {
    padding: 0;
}

div.container.tight > .row-fluid {
    padding: 0;
}

I added a class tight to the container to restrict this padding removal to just this one spot (or any other container with tight on it). Doing it globally could interfere with other things like navbars potentially.

Answer 5

The original bootstrap code is

.row{
   margin-right:-15px;
   margin-left:-15px;
}

that's why you have padding and a scroll bar.

So you want to reset them at 0px but if it's something you only want once, you should not override the original bootstrap CSS. Then you can later use it with the normal behavior.

What I would do is to add another class like this:

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

Then with this CSS

.rowWithFullWidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

that way, you can use .row with the normal behavior after.

Answer 6

You can resolve this issue in Bootstrap 3 by:

1. Wrapping your row in a div with a class of container or container-fluid and adding a padding of 0px.
2. Hiding the horizontal overflow.

Example:

First wrap your row in a container:

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

Then add a padding of 0px to your container class:

.container {
    padding: 0px;
}

Finish off by hiding the horizontal overflow:

body {
    overflow-x: hidden;
}

Ta da!