Version: 1.0 | 1.1 | 2.0 |

Column

in namespace DotVVM.Framework.Controls.Bootstrap

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

Properties

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

Events

Name Type Description

Usage & Scenarios

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

HTML Rendered by the Control

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">XS = 4/12 | LG = 10/12</bs:Column>
<bs:Column SizeXS="8" SizeLG="2" style="background-color: blue">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">no offset</bs:Column>
<bs:Column SizeXS="5" OffsetLG="4" SizeLG="6" style="background-color: red">offset = 4 for the large screen</bs:Column>

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message