Version: 2.0 |

Row

in namespace DotVVM.Framework.Controls.Bootstrap4

Represents a row in Bootstrap grid system.

Properties

Name Type Description Notes Default Value
Type RowType Gets or sets whether this is a normal row or a row inside form.
attribute
inner element
static value
bindable
default
Default
UseGutters Boolean Gets or sets whether the row has gutters.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description

Usage & Scenarios

Renders a Bootstrap row.

https://getbootstrap.com/docs/4.1/layout/grid/

HTML Rendered by the Control

Sample 1: Row with Columns

The row can contain one or more Column controls.

<bs:Row>
  <bs:Column>
    Column 1
  </bs:Column>
  <bs:Column>
    Column 2
  </bs:Column>
</bs:Row>

Sample 2: Gutters

By default, columns in Bootstrap rows use gutters to preserve space between them. The gutters can be disabled by the UseGutters property.

<bs:Row UseGutters="false">
  <bs:Column>
    Column 1
  </bs:Column>
  <bs:Column>
    Column 2
  </bs:Column>
</bs:Row>

Sample 3: Horizontal Alignment

The JustifyContent property allows to specify horizontal alignment for all screen sizes.

There are also JustifyContentSM, JustifyContentMD, JustifyContentLG and JustifyContentXL to specify the behavior for particular screen sizes.

  • Start aligns the columns to the left.
  • Center aligns the columns to the middle.
  • End aligns the columns to the right.
  • Around distributes the remaining space equally around every column.
  • Between distributes the remaining space equally in the gaps between columns.

See the diagram in Bootstrap Grid documentation.

<bs:Row JustifyContentMD="Start" JustifyContentMD="Center">
  <bs:Column>
    Column 1
  </bs:Column>
  <bs:Column>
    Column 2
  </bs:Column>
</bs:Row>

Sample 4: Vertical Alignment

The AlignItems property allows to specify vertical alignment of the columns in 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 AlignItems="Center">
  <bs:Column>
    Column 1
  </bs:Column>
  <bs:Column>
    Column 2
  </bs:Column>
</bs:Row>

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