Bootstrap container-fluid padding

Question

The following HTML is generating unwanted padding:

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

Screenshot showing the problem:

Answer 1

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

Answer 2

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>