Bootstrap Container Fluid for xs, sm

Update 2020:

As of Bootstrap 4.4, there are now responsive containers:

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Demo

Original answer:

The container and container-fluid are identical on the xs breakpoint since they're both full width. To override the width for the sm breakpoint you could do this..

@media (max-width: 992px) {
   .container {
      width: 100%;
   }
}

Demo

With Bootstrap 4
Plain css:

@media (max-width: 768px) {
  .container {
    width: 100%;
    max-width: none;
  }
}

If you use Sass:

@include media-breakpoint-down(md) {
  .container {
    width: 100%;
    max-width: none;
  }
}

Demo: https://codepen.io/albertojacini/pen/KXgNqB