Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Responsive container-fluid

See original GitHub issue

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;
  }
}

Issue Analytics

State:
Created 6 years ago
Reactions:9
Comments:7 (7 by maintainers)

Top GitHub Comments

6reactions

browner12commented, Feb 9, 2018

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>

3reactions

exige81commented, Nov 29, 2017

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

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

Top Results From Across the Web

Containers · Bootstrap v5.0

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-width...

Bootstrap 4 Containers

The .container class provides a responsive fixed width container; The .container-fluid class provides a full width container, spanning the entire width of ...

Bootstrap 5 Fixed, Fluid and Responsive Containers

In this tutorial you will learn how to create fixed-width, fluid, and responsive containers that adapt to any viewport or devices using the...

Bootstrap Containers - examples & tutorial

Container is a fundamental building block required in the latest Bootstrap 5. It allows building responsive layouts in seconds.

Containers in Bootstrap with examples

Containers in Bootstrap with examples ·.container: The .container class provides a responsive fixed width container. · Output: ·.container-fluid: ...