@page @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel @{ ViewData["Title"] = "Grids"; }

Grids

Based on Bootstrap grid.

# Example

One of two columns One of two columns One of three columns One of three columns One of three columns 
<abp-container>
     <abp-row>
         <abp-column size-sm="C6">One of two columns</abp-column>
         <abp-column size-sm="C6">One of two columns</abp-column>
     </abp-row>
     <abp-row>
         <abp-column size-sm="C4">One of three columns</abp-column>
         <abp-column size-sm="C4">One of three columns</abp-column>
         <abp-column size-sm="C4">One of three columns</abp-column>
     </abp-row>
</abp-container>

# Break Column Example

One of three columns One of three columns @* TODO: abp-column-break *@ One of three columns 
 <abp-container>
     <abp-row>
         <abp-column>One of three columns</abp-column>
         <abp-column>One of three columns</abp-column>
         <abp-col-break /> @* TODO: abp-column-break *@
         <abp-column>One of three columns</abp-column>
     </abp-row>
 </abp-container>

# Vertical alignment Example

One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns 
<abp-container>
     <abp-row v-align="Start">
        <abp-column>One of three columns</abp-column>
        <abp-column>One of three columns</abp-column>
        <abp-column>One of three columns</abp-column>
     </abp-row>
     <abp-row v-align="Center">
         <abp-column>One of three columns</abp-column>
         <abp-column>One of three columns</abp-column>
         <abp-column>One of three columns</abp-column>
     </abp-row>
     <abp-row v-align="End">
         <abp-column>One of three columns</abp-column>
         <abp-column>One of three columns</abp-column>
         <abp-column>One of three columns</abp-column>
     </abp-row>
 </abp-container>

# Vertical alignment Example 2

One of three columns One of three columns One of three columns 
 <abp-container>
    <abp-row>
        <abp-column v-align="Start">One of three columns</abp-column>
        <abp-column v-align="Center">One of three columns</abp-column>
        <abp-column v-align="End">One of three columns</abp-column>
     </abp-row>
 </abp-container>

# Horizontal alignment Example

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

# Order Example

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

# Offset Example

.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-row>
    <abp-column> .col-md-4</abp-column>
    <abp-column size-md="C4" offset-md="C4">.col-md-4 .offset-md-4</abp-column>
 </abp-row>
 <abp-row>
    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
 </abp-row>
 <abp-row>
    <abp-column size-md="C6" offset-md="C3">.col-md-6 .offset-md-3</abp-column>
 </abp-row>
< back