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