Bootstrap Container Fluid for xs, sm

Bootstrap Container Fluid for xs, sm

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.

Solutions/Answers:

Solution 1:

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: http://codeply.com/go/dHFw0LcVPl

The container and container-fluid work the same way in Bootstrap 4.

Solution 2:

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

Solution 3:

As noted, this is solution for Bootstrap 4

The Issue

Currently we have a full-width edge-to-edge fluid container for xs viewport. Then we have fixed size containers for sm, md, lg etc.

As sm viewport is also considered as a small device sometimes we would want to have full-width edge-to-edge fluid container there too, the same as for xs.

The Solution

If you compile Bootstrap from SCSS by yourself then you can simply override the variable $container-max-widths by removing max-width for sm breakpoint. This is a neat and clean solution I would recommend.

Related:  Bootstrap container with position:absolute loses layout inside

Find in the Bootstrap source code (vendor) _variables.scss:

$container-max-widths: (
  sm: 540px, // <-- we are going to remove this line
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Copy into your custom file and override by removing sm definition row and removing !default keyword e.g. in _my-variables.scss file:

$container-max-widths: (
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Learn more about Theming Bootstrap with your own SCSS variables.

If you do not compile Bootstrap by yourself then you definitively might want to. It’s the whole new level of magic you’ll find there.

References