Grids

Based on Bootstrap grid.

Equal-width

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

        <abp-container>
            <abp-row>
                <abp-column>1 of 2</abp-column>
                <abp-column>2 of 2</abp-column>
            </abp-row>
            <abp-row>
                <abp-column>1 of 3</abp-column>
                <abp-column>2 of 3</abp-column>
                <abp-column>3 of 3</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col">1 of 2</div>
                <div class="col">2 of 2</div>
            </div>
            <div class="row">
                <div class="col">1 of 3</div>
                <div class="col">2 of 3</div>
                <div class="col">3 of 3</div>
            </div>
        </div>

Column Breaker

column
column
column
column

        <abp-container>
            <abp-row>
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
                <abp-column-breaker/>
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col">column</div>
                <div class="col">column</div>
                <div class="w-100"></div>
                <div class="col">column</div>
                <div class="col">column</div>
            </div>
        </div>

Setting one column width

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

        <abp-container>
            <abp-row>
                <abp-column>1 of 3</abp-column>
                <abp-column size="_6">2 of 3 (wider)</abp-column>
                <abp-column>3 of 3</abp-column>
            </abp-row>
            <abp-row>
                <abp-column>1 of 3</abp-column>
                <abp-column size="_5">2 of 3 (wider)</abp-column>
                <abp-column>3 of 3</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col">1 of 3</div>
                <div class="col col-6">2 of 3 (wider)</div>
                <div class="col">3 of 3</div>
            </div>
            <div class="row">
                <div class="col">1 of 3</div>
                <div class="col col-5">2 of 3 (wider)</div>
                <div class="col">3 of 3</div>
            </div>
        </div>

Variable width content

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

        <abp-container>
            <abp-row h-align="Center">
                <abp-column size-lg="_2">1 of 3</abp-column>
                <abp-column size-md="Auto">Variable width content</abp-column>
                <abp-column size-lg="_2">3 of 3</abp-column>
            </abp-row>
            <abp-row>
                <abp-column>1 of 3</abp-column>
                <abp-column size-md="Auto">Variable width content</abp-column>
                <abp-column size-lg="_2">3 of 3</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row justify-content-center">
                <div class="col col-lg-2">1 of 3</div>
                <div class="col col-md-auto">Variable width content</div>
                <div class="col col-lg-2">3 of 3</div>
            </div>
            <div class="row">
                <div class="col">1 of 3</div>
                <div class="col col-md-auto">Variable width content</div>
                <div class="col col-lg-2">3 of 3</div>
            </div>
        </div>

Responsive classes

All breakpoints
col
col
col
col
col-8
col-4

            <abp-row>
                <abp-column>col</abp-column>
                <abp-column>col</abp-column>
                <abp-column>col</abp-column>
                <abp-column>col</abp-column>
            </abp-row>
            <abp-row>
                <abp-column size="_8">col-8</abp-column>
                <abp-column size="_4">col-4</abp-column>
            </abp-row>


            <div class="row">
                <div class="col">col</div>
                <div class="col">col</div>
                <div class="col">col</div>
                <div class="col">col</div>
            </div>
            <div class="row">
                <div class="col col-8">col-8</div>
                <div class="col col-4">col-4</div>
            </div>
All breakpoints
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
col-sm

        <abp-row>
            <abp-column size-sm="_8">col-sm-8</abp-column>
            <abp-column size-sm="_4">col-sm-4</abp-column>
        </abp-row>
        <abp-row>
            <abp-column size-sm="_">col-sm</abp-column>
            <abp-column size-sm="_">col-sm</abp-column>
            <abp-column size-sm="_">col-sm</abp-column>
            <abp-column size-sm="_">col-sm</abp-column>
        </abp-row>


         <div class="row">
            <div class="col col-sm-8">col-sm-8</div>
            <div class="col col-sm-4">col-sm-4</div>
        </div>
        <div class="row">
            <div class="col col-sm">col-sm</div>
            <div class="col col-sm">col-sm</div>
            <div class="col col-sm">col-sm</div>
            <div class="col col-sm">col-sm</div>
        </div>
Mix and match
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <abp-row>
            <abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column>
            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
        </abp-row>

        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <abp-row>
            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
            <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
        </abp-row>

        <!-- Columns are always 50% wide, on mobile and desktop -->
        <abp-row>
            <abp-column size="_6">.col-6</abp-column>
            <abp-column size="_6">.col-6</abp-column>
        </abp-row>


        <div class="row">
            <div class="col col-12 col-md-8">.col-12 .col-md-8</div>
            <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col col-6">.col-6</div>
            <div class="col col-6">.col-6</div>
        </div>

Alignment

Vertical Alignment
column
column
column
column
column
column
column
column
column

        <abp-container>
            <abp-row v-align="Start">
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
            </abp-row>
            <abp-row v-align="Center">
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
            </abp-row>
            <abp-row v-align="End">
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
                <abp-column>column</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row align-items-start">
                <div class="col">column</div>
                <div class="col">column</div>
                <div class="col">column</div>
            </div>
            <div class="row align-items-center">
                <div class="col">column</div>
                <div class="col">column</div>
                <div class="col">column</div>
            </div>
            <div class="row align-items-end">
                <div class="col">column</div>
                <div class="col">column</div>
                <div class="col">column</div>
            </div>
        </div>
column
column
column

        <abp-container>
            <abp-row v-align="Start">
                <abp-column v-align="Start">column</abp-column>
                <abp-column v-align="Center">column</abp-column>
                <abp-column v-align="End">column</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row align-items-start">
                <div class="col align-self-start">column</div>
                <div class="col align-self-center">column</div>
                <div class="col align-self-end">column</div>
            </div>
        </div>
Horizontal alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

        <abp-container>
            <abp-row h-align="Start">
                <abp-column size="_4">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>
            <abp-row h-align="Center">
                <abp-column size="_4">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>
            <abp-row h-align="End">
                <abp-column size="_4">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>
            <abp-row h-align="Around">
                <abp-column size="_4">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>
            <abp-row h-align="Between">
                <abp-column size="_4">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row justify-content-start">
                <div class="col col-4">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
            <div class="row justify-content-center">
                <div class="col col-4">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
            <div class="row justify-content-end">
                <div class="col col-4">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
            <div class="row justify-content-around">
                <div class="col col-4">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
            <div class="row justify-content-between">
                <div class="col col-4">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
        </div>
No gutters
One of two columns
One of two columns

            <abp-row gutters="false">
                <abp-column size="_8">One of two columns</abp-column>
                <abp-column size="_4">One of two columns</abp-column>
            </abp-row>


            <div class="row g-0">
                <div class="col col-8">One of two columns</div>
                <div class="col col-4">One of two columns</div>
            </div>
Column wrapping
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.s

            <abp-row>
                <abp-column size="_9">.col-9</abp-column>
                <abp-column size="_4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</abp-column>
                <abp-column size="_6">.col-6<br>Subsequent columns continue along the new line.s</abp-column>
            </abp-row>


            <div class="row">
                <div class="col col-9">.col-9</div>
                <div class="col col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
                <div class="col col-6">.col-6<br>Subsequent columns continue along the new line.s</div>
            </div>

Reordering

Order classes
First, but Last
Second, but unordered
Third, but Second

        <abp-container>
            <abp-row>
                <abp-column order="_12">First, but Last</abp-column>
                <abp-column>Second, but unordered</abp-column>
                <abp-column order="_6">Third, but Second</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col order-12">First, but Last</div>
                <div class="col">Second, but unordered</div>
                <div class="col order-6">Third, but Second</div>
            </div>
        </div>
First, but Last
Second, but unordered
Third, but First

        <abp-container>
            <abp-row>
                <abp-column order="Last">First, but Last</abp-column>
                <abp-column>Second, but unordered</abp-column>
                <abp-column order="First">Third, but First</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col order-last">First, but Last</div>
                <div class="col">Second, but unordered</div>
                <div class="col order-first">Third, but First</div>
            </div>
        </div>

Offsetting columns

Offset classes
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

        <abp-container>
            <abp-row>
                <abp-column size-md="_4">.col-md-4</abp-column>
                <abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
            </abp-row>
            <abp-row>
                <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
                <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
            </abp-row>
            <abp-row>
                <abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col col-md-4">.col-md-4</div>
                <div class="col col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
            </div>
            <div class="row">
                <div class="col col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                <div class="col col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
            </div>
            <div class="row">
                <div class="col col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
            </div>
        </div>
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

        <abp-container>
            <abp-row>
                <abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column>
                <abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column>
            </abp-row>
            <abp-row>
                <abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column>
                <abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column>
            </abp-row>
        </abp-container>


        <div class="container">
            <div class="row">
                <div class="col col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
                <div class="col col-sm-5 col-md-6 offset-sm-2 offset-md-0">col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
            </div>
            <div class="row">
                <div class="col col-sm-6 col-md-5 col-lg-6">col-sm-6 .col-md-5 .col-lg-6</div>
                <div class="col col-sm-6 col-md-5 col-lg-6 offset-md-2 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
            </div>
        </div>
< back