'Bootstrap container-fluid padding

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:

Screenshot showing the problem

htmlcsstwitter-bootstrap


Solution 1:[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; }

Solution 2:[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>

Solution 3:[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

Solution 4:[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.

Solution 5:[5]

Adding these classes helped me

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

Solution 6:[6]

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

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

This works for Bootstrap 3

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

}

Solution 10:[10]

I think those padding is a result with your styling. check the CSS section/file. or post the full code here. then we will be able to give a solution for the problem.

Solution 11:[11]

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

Solution 12:[12]

For Bootstrap 5 and possibly others, you're overthinking it. You do not need container-fluid in order for your Grid to work properly. From the documentation: "Need an edge-to-edge design? Drop the parent .container or .container-fluid." See: https://getbootstrap.com/docs/5.0/layout/gutters/

So here I just added a 100% width for demonstration.

<div style="width: 100%">
    <div class="row g-0">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

Solution 13:[13]

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.

Related Questions