Sizing
You can use these classes to set width and height in percentage-based layouts.
Special classes are also available for full and auto sizing.
Responsive Usage: Classes are mobile-first. The default applies to all screens (xs).
For larger screens use
-sm-, -md-, -lg- suffixes.
Width
.fo-width-0 |
0% |
.fo-width-10 |
10% |
.fo-width-25 |
25% |
.fo-width-33 |
33% |
.fo-width-50 |
50% |
.fo-width-66 |
66% |
.fo-width-75 |
75% |
.fo-width-100 |
100% |
.fo-width-full |
100% (special) |
.fo-width-auto |
auto (special) |
Height
.fo-height-0 |
0% |
.fo-height-10 |
10% |
.fo-height-25 |
25% |
.fo-height-33 |
33% |
.fo-height-50 |
50% |
.fo-height-66 |
66% |
.fo-height-75 |
75% |
.fo-height-100 |
100% |
.fo-height-full |
100% (special) |
.fo-height-auto |
auto (special) |
Responsive Usage
To use width and height responsively, append the breakpoint name
(sm, md, lg) after the class name:
.fo-width-lg-50→ 50% width on large screens and up.fo-height-md-100→ 100% height on medium screens and up