20

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?

Santosh
  • 2,430
  • 5
  • 33
  • 47

6 Answers6

27

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;
}
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 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)! – Santosh Nov 20 '13 at 07:40
  • I was missing the `container` class, so thank you for helping! Anyway it does not make any sense - why is only the right side affected by an extra padding, and not the left side? `container` uses same padding for both cases.. – Nurp Jan 13 '15 at 16:55
  • This should not be the accepted answer as it does not work – Dimitri Kopriwa Apr 21 '16 at 14:52
7

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.

Jake Peyser
  • 1,180
  • 8
  • 17
Marc
  • 16,170
  • 20
  • 76
  • 119
1

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;*/
}
Denis
  • 125
  • 1
  • 11
0

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

Peter Berg
  • 6,006
  • 8
  • 37
  • 51
0

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.

user1118279
  • 207
  • 3
  • 4
0

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!

ariebear
  • 155
  • 1
  • 7