Edit on Github

Row

in namespace DotVVM.Framework.Controls.Bootstrap4

Represents a row in Bootstrap grid system.

Usage & Scenarios

Renders a Bootstrap row.

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

Sample 1: Row with Columns

The row can contain one or more Column controls.

page.dothtml

<bs:Row>
  <bs:Column style="background-color: blue; color: white">
    Column 1
  </bs:Column>
  <bs:Column style="background-color: red; color: white">
    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.

page.dothtml

<bs:Row UseGutters="false">
  <bs:Column style="background-color: blue; color: white">
    Column 1
  </bs:Column>
  <bs:Column style="background-color: red; color: white">
    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.

page.dothtml

<bs:Row JustifyContentMD="Start" JustifyContentMD="Center">
  <bs:Column style="background-color: blue; color: white">
    Column 1
  </bs:Column>
  <bs:Column style="background-color: red; color: white">
    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.

page.dothtml

<bs:Row AlignItems="Center">
  <bs:Column style="background-color: blue; color: white">
    Column 1
  </bs:Column>
  <bs:Column style="background-color: red; color: white">
    Column 2
  </bs:Column>
</bs:Row>

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
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. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	attribute inner element static value bindable default	null
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
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True