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.

Code

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

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/dist/styles/_container-grid.scss

Edit post on GitHub