Container Max Widths

Bootstrap provides a .container-<breakpoint> class, which makes the container fluid until the specified breakpoint. At that point, it adopts a fixed max-width based on the breakpoint.

While this is useful, there's another scenario that may often arise: maintaining standard container sizing but preventing it from growing beyond a certain breakpoint. This is where the idea of container max widths comes in. For example, a class like .container-max-md would allow the container to behave normally up to the medium (md) breakpoint, but retain the medium container’s max-width even on larger breakpoints (lg, xl, xxl).

This approach can be especially helpful on text-heavy pages, where overly wide containers (e.g., on ultra-wide monitors) may hurt readability.

Getting Started

Sass

@import "node_modules/@ngblaylock/bootstrap-extensions/src/scss/_container-max-widths.scss";

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@0.2.0/dist/css/container-max-widths.min.css"
/>

Usage

Using max widths requires either a .container, .container-fluid, or .container-<breakpoint> class.

<div class="container">
  <div class="text-bg-light p-3">
    <code>.container</code><br />
    Standard container.
  </div>
</div>

<div class="container container-max-md">
  <div class="text-bg-light p-3">
    <code>.container.container-max-md</code><br />
    Container is never larger than it is on the medium breakpoint.
  </div>
</div>

<div class="container-lg container-max-lg">
  <div class="text-bg-light p-3">
    <code>.container-lg.container-max-lg</code><br />
    Container is fluid until the large breakpoint and never gets larger after
    the large breakpoint.
  </div>
</div>

Existing Workarounds

One common workaround is to use rows and columns to simulate a narrow layout:

<div class="container">
  <div class="row">
    <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 col-xxl-6 offset-xxl-3">
      ...
    </div>
  </div>
</div>

The issue with this method is that the layout shifts significantly across the md, lg, xl, and xxl breakpoints, potentially disrupting the user experience. It is also painful to write and maintain.

Another workaround is to apply an inline style to force a specific max-width. However, this requires hardcoding values and managing breakpoints manually, which can be difficult to maintain.