Bootstrap: Responsive container-fluid

[fulldecent]

FEATURE REQUEST: .container-*-fluid

DESCRIPTION: Switch to fluid layout for viewports larger than a certain size.

Use case: https://codepen.io/anon/pen/WXaoyo?editors=1100#0

Implementation for .container-xl-fluid:

@media (min-width: 1200px) {
  .container-xl-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: none;
  }
}

[exige81]

You can basically do this with the existing responsive flex direction utilities

example: https://codepen.io/anon/pen/RjeBMG

[fulldecent]

Isn't that the same as just normal responsive rows?

https://codepen.io/anon/pen/zPmVGJ

<div class="container-fluid">
  <div class="row">
    <div class="col-xl">
      <p class="alert alert-success">Left</p>
    </div>
    <div class="col-xl">
      <p class="alert alert-primary">Right</p>
    </div>
  </div>
</div>

The problem I am trying to solve is for breakpoints -sm, -md and -lgwith a single column, there are the nice margins that .container has.

[mdo]

The columns changing in the CodePen are coincidental to the actual feature request I think. The idea is that we have the ability to toggle from a pixel width to a fluid one with a class. For example:

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

This would be independent from the normal grid column classes.

[fulldecent]

@mdo Yes this is correct. Sorry, the rows are totally coincidental.

[browner12]

would love to see this addressed for v4.1.

Common use case is I want a .container for larger devices, and when I go to smaller screen, I want to take advantage of all the real estate available to me and switch to a .container-fluid.

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

    <div>I'm full width on small devices and contained on wider screens.</div>

</div>

[mdo]

Closing since we shipped this in an earlier version with the responsive containers.

[fulldecent]

Great, thank you!