Grid System

Xamstrap includes a responsive, fluid grid system that appropriately scales up to 12 columns as the device size increases. It includes predefined classes for easy layout options.

Break Points

Xamstrap break points are decided based on screen size. All the break points for different screen size are listed below.

Break Point	Screen Size
width <= 544	xs (Extra Small)
width > 544 && width <= 768	sm (Small)
width > 768 && width <= 992	md (Medium)
width > 992 && width <= 1200	lg (Large)
width > 1200	xl (Extra Large)

Extra Small and Medium Screens

Don't want your columns to simply stack in extra small and small screens? Use the extra small and medium device grid classes by adding col-xs-* col-md-* to your columns. See the example below for a better idea of how it all works.

> Fig(1) xs (extra small) > Fig(2) md (medium)

As show in Fig(1) and Fig(2) for xs(extra small) and md(medium) screen size content will wrap according the screen size and move to next line.

Sample Code

<!--Row 1-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-12 col-md-8" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-12  col-md-8"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-md-4" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6  col-md-4"></Label>
    </Grid>
</Control:Div>

<!--Row 2-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-md-4" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-6  col-md-4"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-md-4" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6  col-md-4"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-md-4" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-6  col-md-4"></Label>
    </Grid>
</Control:Div>

<!--Row 3-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-6" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-6"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6"></Label>
    </Grid>
</Control:Div>

Extra Small, Small and Medium Screens

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

> Fig(1) xs (extra small) > Fig(2) sm (small) > Fig(3) md (medium)

Sample Code

 <!--Row 1-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-12 col-sm-6 col-md-8" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-12  col-sm-6  col-md-8"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-md-4" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6  col-md-4"></Label>
    </Grid>
</Control:Div>

 <!--Row 2-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-sm-4" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-6  col-sm-4"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-sm-4" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6  col-sm-4"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-sm-4" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-6  col-sm-4"></Label>
    </Grid>
</Control:Div>

Column Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

> Fig(1) xs(extra samll) > Fig(2) md(medium)

As shown in Fig(1) and Fig(2) here, we have used class col-xs-9 and col-xs-4.The sum of this two will be 13 which is greater then 12. So for every screen size the second column will wrap to new line.

Sample Code

<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-9" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-9"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-4" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-4  Since 9 + 4 = 13 > 12,wrap to new line"></Label>
    </Grid>
</Control:Div>

Offsetting Columns

Move columns to the right using col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, col-md-offset-4 moves col-md-4 over four columns.

> Fig(1) xs(extra samll) > Fig(2) sm(small) > Fig(3) md(medium)

Sample Code

<!--Row 1-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-4 col-sm-6" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-4 col-sm-6"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-4 col-xs-offset-4 col-sm-6" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-4 col-xs-offset-4 col-sm-6"></Label>
    </Grid>
</Control:Div>

<!--Row 2-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-sm-4 col-md-6" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-sm-4 col-md-6"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-sm-4 col-sm-offset-4 col-md-6" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-sm-4 col-sm-offset-4 col-md-6"></Label>
    </Grid>
</Control:Div>

Offset Overriding

You can also override offsets from lower grid tiers with col-*-offset-0 classes.

> Fig(1) xs(extra samll) > Fig(2) sm(small) > Fig(3) md(medium)

Sample Code

<!--Row 1-->
<Control:Div Attached:ResponsiveProperty.Class="row">
    <Grid Attached:ResponsiveProperty.Class="col-xs-3 col-sm-6" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-xs-3 col-sm-6"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-0"></Label>
    </Grid>
</Control:Div>

<!--Row 2-->
<Control:Div Attached:ResponsiveProperty.Class="row" Margin="0,0,0,10">
    <Grid Attached:ResponsiveProperty.Class="col-sm-3 col-md-6" HeightRequest="50" BackgroundColor="#EEEEEE">
      <Label  HorizontalOptions="Center" VerticalOptions="Center" Text="col-sm-3 col-md-6"></Label>
    </Grid>

    <Grid Attached:ResponsiveProperty.Class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-0" HeightRequest="50" BackgroundColor="#E0E0E0">
      <Label  HorizontalOptions="Center" VerticalOptions="Center"  Text="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-0"></Label>
    </Grid>
</Control:Div>