Bootstrap 3 and 4 .container-fluid with grid adding unwanted padding

Question

I'd like my content to be fluid, but when using .container-fluid with Bootstrap's grid, I'm still seeing padding.

How can I get rid of the padding?

I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the padding is back.

I want to be able to use the columns at full width.

An example:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Solution I've got:

Override bootstrap.css, linke 1427 & 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

to

padding-right: 0px;
padding-left: 0px;

Answer 1

You should also add a "row" to each container which will "fix" this issue!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

See http://jsfiddle.net/3px20h6t/