Grid

Use container, row, and column helpers for Bootstrap layout, gutters, responsive spans, offsets, and ordering.

Bootstrap's grid is built with containers, rows, and columns. BCL maps those primitives to bs-container, bs-row, and bs-div with column attributes.

Rows wrap columns and manage gutters.
bs-div becomes a column when col, span, offset, or column-order attributes are assigned.
Columns default to equal width when col is set unless a span is provided.
Responsive attributes such as span-md, offset-md, column-order, and row-columns-lg generate Bootstrap grid classes.
Remaining utility-only Bootstrap classes can still be passed through with class.

The default column system has 12 columns.
Breakpoints follow Bootstrap's sm, md, lg, xl, and xxl tiers.
Use span for all breakpoints, then override with breakpoint-specific spans as the viewport grows.

Use bs-container, bs-row, and column-enabled bs-div elements together for the standard Bootstrap grid shape.

Columns without explicit spans share the available width automatically.

1 of 2

2 of 2

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">1 of 2</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">2 of 2</bs-div></bs-div>
</bs-row>

1 of 3

Variable width content

3 of 3

aspnet


<bs-row justify-content-md="Center" x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Two" span-lg="Two"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">1 of 3</bs-div></bs-div>
    <bs-div span-md="Auto"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Variable width content</bs-div></bs-div>
    <bs-div span="Two" span-lg="Two"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">3 of 3</bs-div></bs-div>
</bs-row>

Use span-md="Auto" when one column should size to its content at a breakpoint.

Responsive span attributes map to Bootstrap's breakpoint-specific column classes.

col

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">col</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">col</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">col</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">col</bs-div></bs-div>
</bs-row>

Use breakpoint-specific spans when columns should stack on small screens and become horizontal at larger breakpoints.

.col-md-8

.col-md-4

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Eight"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-8</bs-div></bs-div>
    <bs-div span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-4</bs-div></bs-div>
</bs-row>

Set explicit column spans when one column should take a fixed share of the row and another should fill or size automatically.

Four

Eight

Six

Auto width

Six

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3" bottom-margin="Default3">
    <bs-div span="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Four</bs-div></bs-div>
    <bs-div span="Eight"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Eight</bs-div></bs-div>
</bs-row>
<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Six</bs-div></bs-div>
    <bs-div span="Auto"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Auto width</bs-div></bs-div>
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Six</bs-div></bs-div>
</bs-row>

Mix base and breakpoint-specific spans to control how columns wrap from small to larger screens.

.col-md-8

.col-6 .col-md-4

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3" bottom-margin="Default3">
    <bs-div span-md="Eight"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-8</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
</bs-row>
<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
</bs-row>

Combine base and breakpoint-specific spans to express Bootstrap's responsive grid behavior without writing the class names by hand.

.col-12 .col-md-8

.col-6 .col-md-4

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Twelve" span-md="Eight"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-12 .col-md-8</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
    <bs-div span="Six" span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-6 .col-md-4</bs-div></bs-div>
</bs-row>

Nested grids should place a new bs-row inside a column. The nested row then owns its own column set and gutters.

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-sm="Three">
        <bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Level 1: .col-sm-3</bs-div>
    </bs-div>
    <bs-div span-sm="Nine">
        <bs-div padding="Default3" borders="All" body-bg-color="Tertiary">
            <bs-row x-gutter="Default3" y-gutter="Default3">
                <bs-div span="Eight" span-sm="Six"><bs-div padding="Default3" borders="All" body-bg-color="Primary">Level 2: .col-8 .col-sm-6</bs-div></bs-div>
                <bs-div span="Four" span-sm="Six"><bs-div padding="Default3" borders="All" body-bg-color="Primary">Level 2: .col-4 .col-sm-6</bs-div></bs-div>
            </bs-row>
        </bs-div>
    </bs-div>
</bs-row>

Use offset attributes to move columns to the right at a given breakpoint while preserving the row's column math.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3" bottom-margin="Default3">
    <bs-div span-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-4</bs-div></bs-div>
    <bs-div span-md="Four" offset-md="Four"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-4 .offset-md-4</bs-div></bs-div>
</bs-row>
<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Three" offset-md="Three"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-3 .offset-md-3</bs-div></bs-div>
    <bs-div span-md="Three" offset-md="Three"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">.col-md-3 .offset-md-3</bs-div></bs-div>
</bs-row>

Use column-order attributes when the visual order should differ from the document order. Keep the source order meaningful for assistive technology.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

aspnet


<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div column-order="Last"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">First in DOM, ordered last</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Second in DOM, unordered</bs-div></bs-div>
    <bs-div column-order="First"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Third in DOM, ordered first</bs-div></bs-div>
</bs-row>

Use row gutter attributes to control horizontal, vertical, or combined spacing between columns.

Custom gutters

No gutters

aspnet


<bs-row x-gutter="Default5" y-gutter="Default3" bottom-margin="Default3">
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Custom gutters</bs-div></bs-div>
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Custom gutters</bs-div></bs-div>
</bs-row>
<bs-row gutter="None">
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">No gutters</bs-div></bs-div>
    <bs-div span="Six"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">No gutters</bs-div></bs-div>
</bs-row>

Use row-column attributes when each row should automatically contain a fixed number of columns at each breakpoint.

Column

aspnet


<bs-row row-columns="Two" row-columns-lg="Four" x-gutter="Default3" y-gutter="Default3">
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Column</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Column</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Column</bs-div></bs-div>
    <bs-div col="true"><bs-div padding="Default3" borders="All" body-bg-color="Tertiary">Column</bs-div></bs-div>
</bs-row>

Bootstrap's grid can be customized through Sass variables, maps, and mixins. BCL documents the helper surface for the compiled grid classes available to the application.

Use column span attributes for widths, row gutter attributes for spacing, and row-column attributes for automatic column counts.

The helper attribute names align with Bootstrap's breakpoint tiers: base, small, medium, large, extra large, and extra extra large.

Use BCL attributes for grid spans, offsets, orders, gutters, and row-column counts when available. Use Bootstrap utility classes for remaining class-only layout details such as responsive alignment and body background utilities.

aspnet


<bs-container>
<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Four">Column</bs-div>
    <bs-div span-md="Four" offset-md="Four">Offset column</bs-div>
</bs-row>
</bs-container>

Grid

How it works

Grid options

Example

Auto-layout columns

Equal-width

Setting one column width

Variable-width content

Responsive classes

All breakpoints

Stacked to horizontal

Setting column widths

Example usage

Mix and match

Responsive columns

Nesting

Offsets

Ordering

Gutters

Row columns

Customizing the grid

Columns and gutters

Grid tiers

Customization notes