Note: the DEFAULT breakpoint value represents the case when no explicit columns value is defined. This means that the equal-width columns will be created. In terms of Bootstrap it equivalent to :
xs="DEFAULT"= .col
sm="DEFAULT"= .col-sm
etc.
Responsive classes
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts.
Breakpoints
Breakpoint representing minimum viewport widths used in media query ranges. When used, they apply to that one breakpoint and all those above it (e.g. SM applies to small, medium, large, and extra large devices, but not the first XS breakpoint).
Flexbox alignment is used to vertically and horizontally align columns.
Vertical alignment
<responsiveGridLayout>
<row alignItems="START">
<col>
<label value="1 of 3"/>
</col>
<col>
<label value="2 of 3"/>
</col>
<col>
<label value="3 of 3"/>
</col>
</row>
<row alignItems="CENTER">
<col>
<label value="1 of 3"/>
</col>
<col>
<label value="2 of 3"/>
</col>
<col>
<label value="3 of 3"/>
</col>
</row>
<row alignItems="END">
<col>
<label value="1 of 3"/>
</col>
<col>
<label value="2 of 3"/>
</col>
<col>
<label value="3 of 3"/>
</col>
</row>
</responsiveGridLayout>
<responsiveGridLayout>
<row>
<col alignSelf="START">
<label value="1 of 3"/>
</col>
<col alignSelf="CENTER">
<label value="2 of 3"/>
</col>
<col alignSelf="END">
<label value="3 of 3"/>
</col>
</row>
</responsiveGridLayout>
Horizontal alignment
<responsiveGridLayout stylename="demo">
<row justifyContent="START">
<col xs="4">
<label value="1 of 2"/>
</col>
<col xs="4">
<label value="2 of 2"/>
</col>
</row>
<row justifyContent="CENTER">
<col xs="4">
<label value="1 of 2"/>
</col>
<col xs="4">
<label value="2 of 2"/>
</col>
</row>
<row justifyContent="END">
<col xs="4">
<label value="1 of 2"/>
</col>
<col xs="4">
<label value="2 of 2"/>
</col>
</row>
<row justifyContent="AROUND">
<col xs="4">
<label value="1 of 2"/>
</col>
<col xs="4">
<label value="2 of 2"/>
</col>
</row>
<row justifyContent="BETWEEN">
<col xs="4">
<label value="1 of 2"/>
</col>
<col xs="4">
<label value="2 of 2"/>
</col>
</row>
</responsiveGridLayout>
Reordering
Order classes
Use order attributes for controlling the visual order of your content. Can be either a number or the predefined value (FIRST, LAST).
<responsiveGridLayout>
<row>
<col>
<label value="First in DOM, no order applied"/>
</col>
<col order="12">
<label value="Second in DOM, with a larger order"/>
</col>
<col order="1">
<label value="Third in DOM, with an order of 1"/>
</col>
</row>
</responsiveGridLayout>
<responsiveGridLayout>
<row>
<col order="LAST">
<label value="First in DOM, ordered last"/>
</col>
<col>
<label value="Second in DOM, unordered"/>
</col>
<col order="FIRST">
<label value="Third in DOM, ordered first"/>
</col>
</row>
</responsiveGridLayout>
Offset classes
Use offset attributes for moving columns to the right.
ResponsiveGridLayout- a layout where the components are laid out on a grid, based on the Bootstrap's 12 columns grid system (see Bootstrap doc).Auto-layout columns
Columns can be defined without explicit values like
xs="6".Equal-width
If
cols have no explicit values then every column will be the same width at every viewport, fromxstoxl.Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.
Variable width content
Use
{breakpoint}="AUTO"attributes to size columns based on the natural width of their content.Note: the
DEFAULTbreakpoint value represents the case when no explicit columns value is defined. This means that the equal-width columns will be created. In terms of Bootstrap it equivalent to :xs="DEFAULT"=.colsm="DEFAULT"=.col-smResponsive classes
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts.
Breakpoints
Breakpoint representing minimum viewport widths used in media query ranges. When used, they apply to that one breakpoint and all those above it (e.g.
SMapplies to small, medium, large, and extra large devices, but not the firstXSbreakpoint).Row columns
The
colsattribute defines what number of columns in the row will be at a specific breakpointAlignment
Flexbox alignment is used to vertically and horizontally align columns.
Vertical alignment
Horizontal alignment
Reordering
Order classes
Use
orderattributes for controlling the visual order of your content. Can be either a number or the predefined value (FIRST,LAST).Offset classes
Use
offsetattributes for moving columns to the right.Container types
ResponsiveGridLayouthas two possible types:FLUID- a full-width container, spanning the entire width of the viewport. Used by default.FIXED- a fixed-width container, meaning itsmax-widthchanges at each breakpoint.See JavaDoc for the full description of attributes and their values.
Styles used for demo purpose: