Edit on Github

Row

in namespace DotVVM.Bootstrap5.Controls

Renders a Bootstrap row.

Usage & Scenarios

Represents a row in Bootstrap grid system.

https://getbootstrap.com/docs/5.2/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 {prefix}Gutter{suffix} property, where suffix can be All, Small, Medium, Large, XLarge or XXLarge based on window size and prefix can be Horizontal or Vertical for gutter direction.

page.dothtml

<bs:Row HorizontalGutterSmall="0" HorizontalGutterMedium="1" HorizontalGutterLarge="3" HorizontalGutterXLarge="4" HorizontalGutterXXLarge="5" ColumnNumberAll="2">
    <bs:Column>
        Column 1
    </bs:Column>
    <bs:Column>
        Column 2
    </bs:Column>
    <bs:Column>
        Column 3
    </bs:Column>
    <bs:Column>
        Column 4
    </bs:Column>
</bs:Row>

Sample 3: Justify content (Horizontal Alignment)

Use Flex.JustifyContentAll property on flexbox containers to change the alignment of flex items on the main axis for all screen sizes.

There are also Flex.JustifyContentSmall, Flex.JustifyContentMedium, Flex.JustifyContentLarge, Flex.JustifyContentXLarge and Flex.JustifyContentXXLarge to specify the behavior for particular screen sizes.

None aligns the columns by defaultt.
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 in the gaps between columns. Items have a half-size space on either end.
Between distributes the remaining space equally in the gaps between columns. The first item is flush with the start, the last is flush with the end.
Evenly distributes the remaining space equally in the gaps between columns. Items have equal space around them.

See the diagram in Bootstrap Grid documentation.

page.dothtml

<bs:Row Flex.JustifyContentMedium="Center" style="border-style:dashed">
    <bs:Column style="border-style:solid">
        Column 1
    </bs:Column>
    <bs:Column style="border-style:solid">
        Column 2
    </bs:Column>
</bs:Row>
<bs:Row Flex.JustifyContentAll="Between" style="border-style:dashed">
    <bs:Column style="border-style:solid">
        Column 1
    </bs:Column>
    <bs:Column style="border-style:solid">
        Column 2
    </bs:Column>
</bs:Row>

Sample 4: Vertical Alignment

The AlignItems property allows to specify vertical alignment of the columns in the row.

None aligns the columns by default.
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 Flex.AlignItemsAll="Center" style="height:75px;border-style:solid">
    <bs:Column>
        some normal text
    </bs:Column>
    <bs:Column>
        some very cool text
    </bs:Column>
</bs:Row>
<bs:Row Flex.AlignItemsAll="End" style="height:75px;border-style:solid">
    <bs:Column>
        some normal text
    </bs:Column>
    <bs:Column>
        some very cool text
    </bs:Column>
</bs:Row>

Sample 5: Column Number

The ColumnNumber property allows to specify number of the columns in the row based on the window size.

page.dothtml

    <bs:Row ColumnNumberSmall="1" ColumnNumberMedium="5" ColumnNumberLarge="3" ColumnNumberXLarge="4" ColumnNumberXXLarge="2">
        <bs:Column>
            Column 1
        </bs:Column>
        <bs:Column>
            Column 2
        </bs:Column>
        <bs:Column>
            Column 3
        </bs:Column>
        <bs:Column>
            Column 4
        </bs:Column>
        <bs:Column>
            Column 5
        </bs:Column>
        <bs:Column>
            Column 6
        </bs:Column>
        <bs:Column>
            Column 7
        </bs:Column>
        <bs:Column>
            Column 8
        </bs:Column>
        <bs:Column>
            Column 9
        </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
ColumnNumberAll	String	Gets or sets the number of columns in the row for all screens.	attribute inner element static value bindable default	null
ColumnNumberLarge	String	Gets or sets the number of columns in the row for a large screen.	attribute inner element static value bindable default	null
ColumnNumberMedium	String	Gets or sets the number of columns in the row for a medium screen.	attribute inner element static value bindable default	null
ColumnNumberSmall	String	Gets or sets the number of columns in the row for a small screen.	attribute inner element static value bindable default	null
ColumnNumberXLarge	String	Gets or sets the number of columns in the row for a very large screen.	attribute inner element static value bindable default	null
ColumnNumberXXLarge	String	Gets or sets the number of columns in the row for the largest screen.	attribute inner element static value bindable default	null
Content	List<DotvvmControl>	Gets or sets the content inside the row.	attribute inner element static value bindable default	null
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
HorizontalGutterAll	String	Gets or sets the horizontal gutter size for all screens.	attribute inner element static value bindable default	null
HorizontalGutterLarge	String	Gets or sets the horizontal gutter size for a large screen.	attribute inner element static value bindable default	null
HorizontalGutterMedium	String	Gets or sets the horizontal gutter size for a medium screen.	attribute inner element static value bindable default	null
HorizontalGutterSmall	String	Gets or sets the horizontal gutter size for a small screen.	attribute inner element static value bindable default	null
HorizontalGutterXLarge	String	Gets or sets the horizontal gutter size for a very large screen.	attribute inner element static value bindable default	null
HorizontalGutterXXLarge	String	Gets or sets the horizontal gutter size for the largest screen.	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
VerticalGutterAll	String	Gets or sets the vertical gutter size for all screens.	attribute inner element static value bindable default	null
VerticalGutterLarge	String	Gets or sets the vertical gutter size for a large screen.	attribute inner element static value bindable default	null
VerticalGutterMedium	String	Gets or sets the vertical gutter size for a medium screen.	attribute inner element static value bindable default	null
VerticalGutterSmall	String	Gets or sets the vertical gutter size for a small screen.	attribute inner element static value bindable default	null
VerticalGutterXLarge	String	Gets or sets the vertical gutter size for a very large screen.	attribute inner element static value bindable default	null
VerticalGutterXXLarge	String	Gets or sets the vertical gutter size for the largest screen.	attribute inner element static value bindable default	null
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