Display
You can use these classes to control element display and visibility. Default breakpoint is xs; use -sm, -md, -lg, -xl for responsive variations.
Legacy classes from previous versions are listed below and will be deprecated in 3 months. Please migrate to modern
fo-display-* classes.
Modern Display Classes
| Class | Property | Responsive Examples |
|---|---|---|
.fo-display-none |
display: none | .fo-display-md-none |
.fo-display-block |
display: block | .fo-display-lg-block |
.fo-display-flex |
display: flex | .fo-display-sm-flex |
.fo-display-inline |
display: inline | .fo-display-md-inline |
.fo-display-inline-flex |
display: inline-flex | .fo-display-lg-inline-flex |
.fo-display-table |
display: table | .fo-display-md-table |
Visibility Classes
| Class | Property |
|---|---|
.fo-visible |
visibility: visible |
.fo-hidden |
display: none |
.fo-invisible |
visibility: hidden |
Legacy Classes (Deprecated)
These classes are kept for backward compatibility and will be removed in 3 months.
| Class | Behavior |
|---|---|
.fo-show-phone |
Visible on phones (<768px) |
.fo-hide-tablet |
Hidden on tablets (≥768px) |
.fo-show-desktop |
Visible on desktops (≥1200px) |
.fo-none |
Alias for display:none |
Responsive Variants
Append the breakpoint suffix (-sm, -md, -lg) to apply the display property from that breakpoint upwards.
Legacy Support:
The class
.fo-none is kept for backward compatibility.
For new projects, prefer using .fo-display-none for consistency with other display classes.