Container Grid

`.blue-container-grid`

Adds container query support to Bootstrap’s grid system. By default, Bootstrap’s breakpoint classes only react to changes in the viewport width. With container queries, you can apply breaks based on a custom container.

<div class="blue-container-grid">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
</div>

col-md-4

col-md-8

This is a container grid. Resize the box around to see the effect.

<div
    class="blue-container-grid border-primary-subtle px-3"
    style="resize: both; overflow: auto; border: 1px dashed; width: 958px; height: 140px;"
>
    <div class="row">
        <div class="col-md-4 bg-primary-subtle border border-primary text-primary p-3 text-center">col-md-4</div>
        <div class="col-md-8 bg-primary-subtle border border-primary text-primary p-3 text-center">col-md-8</div>
    </div>
    This is a container grid. Resize the box around to see the effect.
</div>

Edit post on GitHub