Bootstrap container-fluid padding

Answer 1

This works for Bootstrap 3

.container {
   width: calc(100% + 30px);
   padding-right: 0;
   padding-left: 0;
   margin-left: -30px;
   overflow: hidden;

}

Answer 2

 <div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 p-0">
        test
    </div>
  </div>
 </div>

The solution can be achieved by this when you give p-0 to the inner column or you can add a class with the column like "xyz" and give it styling to
".xyz{padding: 0!important;}"

Answer 3

Just add class p-0 to class container-fluid & then add class no-gutters to child elements of class row, if you have more than one add to all rows.

Example:

<div class="container-fluid p-0">
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

Or
<div class="container-fluid p-0">
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

Answer 4

2019 correct way according to the docs is using "x" in your p-0 class. When you use p-0 you are setting padding for top, right, bottom and left. If you use px-0 it's for left-and-right "X coordinates" and so if you set py-0 it's "Y coordinates and at the <div class="row no-gutters">...

Should be like this:

<div class="container-fluid px-0">
 <div class="row no-gutters">
     [..... other codes]
 </div>
</div>

Take a look into the docs: https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

Answer 5

Just remove .col-xs-12. It makes no sense to wrap your content in full-width column additionally.

Answer 6

None of the answers here helped me with Bootstrap 4.

Adding container-fluid p-0 removed the horizontal padding, but created a horizontal scrollbar.

The scrollbars come from the negative margin of the row elements - a 100% width container with no padding gets stretched by 15px on each side. It has nothing to do with column padding, as far as I can see.

The only workaround for me was

.container-fluid{ overflow: hidden; }