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

Solution 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/

Solution 2:

5 years passed, and it's quite strange that there are so many answers there which don't follow (or are against) bootstrap rules or don't actually answer the question...
(For the details on those mistakes check the last section of this answer)

Short Answer:
Simply use Bootstrap's no-gutters class for (Bootstrap 4) OR g-0 for (Bootstrap 5) in your row to remove padding:

  <div class="container-fluid">
    <!-- For Boostrap 4, use this instead:
    <div class="row no-gutters">-->
    <div class="row g-0">
      <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>
  </div>

(Also you've forgotten to add </div> to the end of your file. It's fixed in the code above as well)

Note:

There are cases when you want to remove the padding of the container itself as well. In this case consider dropping .container or .container-fluid classes as recommended by the documentation.

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <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>
<!--</div>-->

Long Answer:

The paddings you get are actually documented in Bootstrap's documentation:

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

And about the solution, which was documented as well:

Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.

Regarding dropping the container:

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

Bonus: About the mistakes found on the other answers

• Avoid hacking bootstrap's container classes instead of making sure that you've put all the content in col-s and wrapped them with row-s as documentation says:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

• If you still have to do hack (just in case someone already messed up things and you need to quickly fix your issue) consider using Bootstrap's px-0 for removing horizontal paddings instead pl-0 pr-0 or reinventing your styles.

Solution 3:

Please find the actual css from Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

When you add a .container-fluid class, it adds a horizontal padding of 15px, and the same will be removed when you add a .row class as a child element by the negative margin set on row.