Bootstrap: .no-gutters in .container-fluid .row

[lucasthibau]

Hello,
I just started with the 4 alpha 6 version and trying to use the .no-gutters class in the .row of a .container fluid but the css is not working and not being overwritten to.
Here is a code sample:

<section>
  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-12">
        CONTENT SECTION
      </div>
    </div>
  </div>
</section>`

I saw some requests in the v3 about this.

[chiraggmodi]

can you create a fiddle?

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin or CodePen and report back with your link, Bootstrap version, and specific browser and OS details.

[lucasthibau]

I added a red border to see that the gutter remains active.

https://codepen.io/lucasthibau/pen/jwJZrx

[mdo]

Ditch the .container-fluid if you don't need the horizontal padding.

[Halfist]

I wanted to have full-width <hr /> within container-fluid. I was trying to achieve this with next snippet, but failed:

<div class="row no-gutters">
    <div class="col">
        <hr />
    </div>
</div>

So, I ended up with this approach:

.no-narrow {
    margin-left: -15px;
    margin-right: -15px;
}

<hr class="no-narrow" />

It's a pity though that we don't have Bootstrap 4 built-in class to achieve the same.