Column
in namespace DotVVM.Framework.Controls.Bootstrap4
Renders a Bootstrap column. Use this control inside the Row control.
Usage & Scenarios
Renders a Boostrap column. This control should be a direct child of Row control.
Sample 1: Column Sizes
You can specify the size of the column in the Bootstrap grid units (12 units per row by default) using the Size
property.
To override the value for particular screen sizes, use the SizeSM
, SizeMD
, SizeLG
and SizeXL
properties.
If you don't specify the size of the column, Bootstrap will distribute the space equally.
See Bootstrap Grid documentation for more details.
<bs:Row>
<bs:Column Size="4" SizeLG="10" style="background-color: red; color: white">
Default = 4/12 | LG = 10/12
</bs:Column>
<bs:Column Size="8" SizeLG="2" style="background-color: blue; color: white">
Default = 8/12 | LG = 2/12
</bs:Column>
</bs:Row>
Sample 2: Column Offsets
To shift the column to the right, use the Offset
property - it specifies the number of columns to be skipped.
To override the value for a particular screen size, use OffsetSM
, OffsetMD
, OffsetLG
and OffsetXL
properties.
<bs:Column SizeXS="7" SizeLG="2" style="background-color: blue; color: white">
no offset
</bs:Column>
<bs:Column SizeXS="5" OffsetLG="4" SizeLG="6" style="background-color: red; color: white">
offset = 4 for the large screen
</bs:Column>
Sample 4: Vertical Alignment
You can use the AlignSelf
property to align the column vertically within the row.
Start
aligns the columns to the top.Center
aligns the columns to the middle.End
aligns the columns to the bottom.
<bs:Row>
<bs:Column AlignSelf="Start" style="background-color: blue; color: white">
Column 1
</bs:Column>
<bs:Column AlignSelf="Center" style="background-color: red; color: white">
Column 2
</bs:Column>
</bs:Row>
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
bindable
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
Offset | String | Gets or sets the offset of the column for all screen sizes. |
attribute
static value
|
null | |
OffsetLG | String | Gets or sets the offset of the column for large screen. |
attribute
static value
|
null | |
OffsetMD | String | Gets or sets the offset of the column for medium screen. |
attribute
static value
|
null | |
OffsetSM | String | Gets or sets the offset of the column for small screen. |
attribute
static value
|
null | |
OffsetXL | String | Gets or sets the offset of the column for extra large screen. |
attribute
static value
|
null | |
Size | String | Gets or sets the horizontal size of the column for all screen sizes. |
attribute
static value
|
null | |
SizeLG | String | Gets or sets the horizontal size of the column for large screen. |
attribute
static value
|
null | |
SizeMD | String | Gets or sets the horizontal size of the column for medium screen. |
attribute
static value
|
null | |
SizeSM | String | Gets or sets the horizontal size of the column for small screen. |
attribute
static value
|
null | |
SizeXL | String | Gets or sets the horizontal size of the column for extra large screen. |
attribute
static value
|
null | |
VerticalAlignment | VerticalAlignment | Gets or sets of the vertical alignment of this column within the row. |
attribute
static value
|
None | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |