Bootstrap container-fluid padding

Answer 1

In this case, the column is actually causing the padding, which is written into the bootstrap .css file.

You didn't mention what version of Bootstrap you're using, I assume 3.x?

I usually add a custom class to my own .css file to eliminate padding when it's not wanted, such as:

.noPadding {
padding: 0 !important;
}

Then add the class to your column like so:

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

This article helped me understand the basics of the Bootstrap grid system and how it handles margins and padding.

Bootstrap 4 will include padding and utility classes to manipulate padding more precisely. Read about it here

Answer 2

Like Jake, I think there is no sense to use 12 columns inside container fluid. Fluid is intended to use 100% width. When you set container-fluid class bootstrap adds padding, and when you set class row, bootstrap adds negative margin, so content goes full width.

Answer 3

If you want a solution that doesn't involve CSS hacks - Just wrap you current row in another row

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

If you look at what row does:

margin-right: -15px;
margin-left: -15px;

So ading another row will just offset the padding created by your <div class="col-xs-12">

Answer 4

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

Answer 5

Adding these classes helped me

<div class="container-fluid p-0 overflow-hidden">

Answer 6

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.