Bootstrap Container Fluid for xs, sm

Question

I'd like my outer-most div container to be just "container" for md and lg, but container-fluid for xs and sm. Can I achieve this natively? Do I need some additonal CSS?

Thanks.

Answer 1

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