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

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 2

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

Answer 3

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 4

Just add this css

.container-fluid {
   padding: 0px;
}

Your Code with this CSS

EDIT:

With this all the page going to have 0 padding. If you only want 0 padding in that part of the page maybe you should create a class "container-0padding" with that css code for example.

Answer 5

 <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 6

I think It works well.

<section class="your-class">
    <div class="container-fluid no-padding">
        <div class="row no-gutters">
            <div class="col-lg-6"></div>
            <div class="col-lg-6"></div>
        </div>
    </div>
</section>

.no-padding {
  padding: 0;
}