DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

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
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
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
inner element
static value
bindable
default
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
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
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

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