When using the Blazorise bootstrap grid components how do you set the responsive layout options using ColumnSize property. I want the column to be size 12 on small screens.
<Row>
<Column ColumnSize="ColumnSize.Is3">
<StatusSelectListComponent @bind-Text="@_item.Status" OnSave="@ItemEditSave" OnCancel="@ItemEditCancel"></StatusSelectListComponent>
</Column>
</Row>
Blazorise allows you to chain size values together and has mapped the properties to the bootstrap classes as follows:
╔══════════════╦═══════════╗
║ Blazorise ║ Bootstrap ║
╠══════════════╬═══════════╣
║ OnMobile ║ col-xs ║
╠══════════════╬═══════════╣
║ OnTablet ║ col-sm ║
╠══════════════╬═══════════╣
║ OnDesktop ║ col-md ║
╠══════════════╬═══════════╣
║ OnWidescreen ║ col-lg ║
╠══════════════╬═══════════╣
║ OnFullHD ║ col-xl ║
╚══════════════╩═══════════╝
So the Blazorise ColumnSize property would look like this:
<Column ColumnSize="ColumnSize.Is12.OnTablet.Is12.OnMobile.Is3.OnDesktop.Is3.OnWidescreen.Is3.OnFullHD">
</Column>
The resulting html would be:
<div class="col col-sm-12 col-xs-12 col-md-3 col-lg-3 col-xl-3" style=""></div>