Column

in namespace DotVVM.Framework.Controls.Bootstrap

Renders a Boostrap column. Use this control inside the Row control.

Usage & Scenarios

Renders a Boostrap Column. Use this control inside the Row. https://getbootstrap.com/docs/3.3/css/#grid

Sample 1: Column Sizes

You can specify the size of the Column (in the Bootstrap grid system) for each screen size by setting the following properties:

  • SizeXS
  • SizeSM
  • SizeMD
  • SizeLG
  • SizeXL
<bs:Column SizeXS="4" SizeLG="10" style="background-color: red; color: white">
    XS = 4/12 | LG = 10/12
</bs:Column>
<bs:Column SizeXS="8" SizeLG="2" style="background-color: blue; color: white">
    XS = 8/12 | LG = 2/12
</bs:Column>

Sample 2: Column Offsets

To shift the column to the right use the following properties:

  • OffsetXS
  • OffsetSM
  • OffsetMD
  • OffsetLG
  • OffsetXL
<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>

Properties

Name Type Description Notes Default Value
property icon OffsetLG Int32? Gets or sets the offset of the column in the LG mode.
attribute
inner element
static value
bindable
default
null
property icon OffsetMD Int32? Gets or sets the offset of the column in the MD mode.
attribute
inner element
static value
bindable
default
null
property icon OffsetSM Int32? Gets or sets the offset of the column in the SM mode.
attribute
inner element
static value
bindable
default
null
property icon OffsetXL Int32? Gets or sets the offset of the column in the XL mode.
attribute
inner element
static value
bindable
default
null
property icon OffsetXS Int32? Gets or sets the offset of the column in the XS mode.
attribute
inner element
static value
bindable
default
null
property icon SizeLG Int32? Gets or sets the horizontal size of the column in the LG mode.
attribute
inner element
static value
bindable
default
null
property icon SizeMD Int32? Gets or sets the horizontal size of the column in the MD mode.
attribute
inner element
static value
bindable
default
null
property icon SizeSM Int32? Gets or sets the horizontal size of the column in the SM mode.
attribute
inner element
static value
bindable
default
null
property icon SizeXL Int32? Gets or sets the horizontal size of the column in the XL mode.
attribute
inner element
static value
bindable
default
null
property icon SizeXS Int32? Gets or sets the horizontal size of the column in the XS mode.
attribute
inner element
static value
bindable
default
null

HTML produced by the control