Possible to convert container/row to container-fluid/row-fluid at viewport breakpoint?

Question

For the purpose of learning Bootstrap, I'm copying http://www.newsweek.com/ (using as vanilla Bootstrap as possible) and the top bar (sign in, register, etc.) has me stymied. With a large viewport, it appears to be a simple container/row, but as it resizes and gets to a medium viewport, instead of breaking it seems to transition to a container-fluid/row-fluid.

I set up a tester in Codepen with every possible combination of containers and rows fluid and responsive independent and codependent (that I'm aware of) to figure out what was going on and to experiment a bit:

http://codepen.io/spectre6000/full/vOzeBB/

At a 1200px viewport width (as indicated below the rulers),

<div class="container">
  <div class="row">
    ...
  </div>
</div>

and

<div class="container-fluid">
  <div class="row-fluid">
    ...
  </div>
</div>

...are identical. It seems this is what the Newsweek site is doing, but I can't find a way to do it myself without coding the bar twice with different visibility.

How do you switch from one container/row setup to the other at the breakpoint?

Answer 1

Add a media query! Use the container class, then do something like this (assuming your container has the id #myContainer):

@media (max-width: 1200px) {
    #myContainer {
        width: 97.5%; /*this gives it the precise width to match the Bootstrap defaults*/
    }
}

The width attribute is pretty much the only real difference between container and container-fluid, so this just makes your container emulate a container-fluid.

Answer 2

In the latest Bootstrap 4.4 you can use:

<div class="container-xl">
  <div class="row">
    ...
  </div>
</div>

This will start off width: 100% ('container-fluid') and then switch to 'container' when you reach your 'xl' breakpoint (normally 1200px).