Grid
Breakpoints:
| Breakpoint |
Screen size |
Class example |
| Extra small and all screen sizes |
0px and above |
fx-col--12 |
| Small |
576px and above |
fx-col--sm-12 |
| Medium |
768px and above |
fx-col--md-12 |
| Large |
992px and above |
fx-col--lg-12 |
| Extra large |
1200px and above |
fx-col--xl-12 |
Grid with equal height columns
.fx-col .fx-col--3 - 3/12 = 25%
.fx-col .fx-col--6 - 6/12 = 50%
.fx-col .fx-col--3 - 3/12 = 25%
No gap between columns (no gutters) - .fx-row--gap-none
.fx-col .fx-col--3
* * * * * * * * * * * * * * * * * * * * *
.fx-col .fx-col--6
* * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * *
.fx-col .fx-col--3
* * * * * * * * * * * * * * * * * * * * *
Grid with nested rows and columns
Nested column
Nested column
Column with a lot of content.
Column with a lot of content.
Nested column
Nested column with a lot of content.
Grid - responsive
.fx-col .fx-col--2 .fx-col--md-4 fx-col--lg-4
.fx-col .fx-col--2 .fx-col--md-3 fx-col--lg-4
.fx-col .fx-col--8 .fx-col--md-5 fx-col--lg-4
Grid vertical alignment. Pure CSS, no JavaScript used.
A lot of text
A lot of text
A lot of text
A lot of text
A lot of text
A lot of text
.fx-col-sm-align-top - align to top
.fx-col-sm-align-middle - align to middle
.fx-col-sm-align-bottom - align to bottom
1 line of text