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
property icon OffsetLG Int32? Gets or sets the offset of the column in the LG mode.
attribute
inner element
static value
bindable
default
property icon OffsetMD Int32? Gets or sets the offset of the column in the MD mode.
attribute
inner element
static value
bindable
default
property icon OffsetSM Int32? Gets or sets the offset of the column in the SM mode.
attribute
inner element
static value
bindable
default
property icon OffsetXL Int32? Gets or sets the offset of the column in the XL mode.
attribute
inner element
static value
bindable
default
property icon OffsetXS Int32? Gets or sets the offset of the column in the XS mode.
attribute
inner element
static value
bindable
default
property icon SizeLG Int32? Gets or sets the horizontal size of the column in the LG mode.
attribute
inner element
static value
bindable
default
property icon SizeMD Int32? Gets or sets the horizontal size of the column in the MD mode.
attribute
inner element
static value
bindable
default
property icon SizeSM Int32? Gets or sets the horizontal size of the column in the SM mode.
attribute
inner element
static value
bindable
default
property icon SizeXL Int32? Gets or sets the horizontal size of the column in the XL mode.
attribute
inner element
static value
bindable
default
property icon 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; 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>

Suggestions

Help & Contribute

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

Edit on Github

Send message