Bootstrap: [Feature request] Auto-switch to .container-fluid on small screens

Created on 10 Jul 2017 · 8Comments · Source: twbs/bootstrap

It would be user-friendly for fixed-width sites (using .container) to be able to switch to .container-fluid when the screen size is sufficiently small. When the size of the screen is similar or smaller than the fixed-width, there's no need to make the content smaller than the screen's width anymore. Could something like one of the following be supported?

<div class="container-fluid container-md"></div>

<div class="container-auto-md"></div>

<div class="container-md"></div>

Using one of the above would have .container behavior on medium and larger screens and .container-fluid behavior on small and extra-small.

As an example I could find online for demonstration purposes, the Stack Overflow "navbar" switches to fluid when the screen width is smaller than the fixed width. To see this, make your browser window larger than the fixed width, then reduce the width of your browser until it is smaller than the fixed width. https://stackoverflow.com

css v4

Source

mrlife

👍8

Most helpful comment

this will be coming in 4.2 with my responsive containers PR.

https://github.com/twbs/bootstrap/pull/25631

browner12 on 4 Sep 2018

❤11

All 8 comments

.container has a max-width on it, so it'll naturally adjust to a constrained parent element. There won't be any automatic flipping between the two.

mdo on 15 Jul 2017

I landed here through a Google search on "bootstrap 4 fluid on small". I don't really mind that this is not a feature of Bootstrap itself, was already expecting this to be an app-specific customization. I couldn't find any good solution yet, so I attempted to make one myself. Given that this closed issue is still a top search result, I'm sharing my workaround/solution here:

@media (max-width: 991px) {
  .container {
    max-width: 98%;
  }
}

This (or something similar) should allow your Bootstrap website to use near full width on [ExtraSmall, Small, Medium] devices (see this for other break points).

PS. The main reason I still wanted this is because the max-width mentioned in previous comment will leave a rather large margin on small/medium devices, which felt like a waste of space (i.e. I want my site to use most of the screen on tablets and smaller devices).

jeroenheijmans on 1 Jun 2018

🚀1 ❤1 🎉1

This seems like it should be really easy to accomplish actually. This would just require a new container class and two complete grid definitions. Here's a rough idea:

.container-mobile-fluid {
  width: 100%;

  .col {
    width: 10%;
  }
}

@media (min-width: 992px) {
  .container-mobile-fluid {
    width: 960px;

    .col {
      width: 96px;
    }
  }
}

This is highly simplified, but the default grid is fluid and then the non-mobile grid is fixed. You basically copy and paste the grid for .container-fluid for the mobile pieces and the .container for the desktop pieces.