Docs - responsive helpers
Connect responsive.css to use responsive helpers.
Screens breakpoints
Breakpoint | Size in pixels |
---|---|
3XS | < 320 |
2XS | 320 - 479 |
XS | 480 - 767 |
SM | 768 - 991 |
MD | 992 - 1139 |
LG | >= 1140 |
Visibility
- .pi-visible-3xs - hides element, and makes it visible on 3XS and less screens
- .pi-visible-2xs - hides element, and makes it visible on 2XS and less screens
- .pi-visible-xs - hides element, and makes it visible on XS and less screens
- .pi-visible-sm - hides element, and makes it visible on SM and less screens
- .pi-visible-md - hides element, and makes it visible on MD and less screens
- .pi-hidden-3xs - hides element, and makes it hidden on 3XS and less and less screens
- .pi-hidden-2xs - hides element, and makes it hidden on 2XS and less screens
- .pi-hidden-xs - hides element, and makes it hidden on XS and less screens
- .pi-hidden-sm - hides element, and makes it hidden on SM and less screens
- .pi-hidden-md - hides element, and makes it hidden on MD and less screens
- .pi-visible-3xs-only - hides element, and makes it visible only on 3XS screens
- .pi-visible-2xs-only - hides element, and makes it visible only on 2XS screens
- .pi-visible-xs-only - hides element, and makes it visible only on XS screens
- .pi-visible-sm-only - hides element, and makes it visible only on SM screens
- .pi-visible-md-only - hides element, and makes it visible only on MD screens
- .pi-visible-lg-only - hides element, and makes it visible only on MD screens
- .pi-hidden-3xs-only - hides element, and makes it hidden only on 3XS screens
- .pi-hidden-2xs-only - hides element, and makes it hidden only on 2XS screens
- .pi-hidden-xs-only - hides element, and makes it hidden only on XS screens
- .pi-hidden-sm-only - hides element, and makes it hidden only on SM screens
- .pi-hidden-md-only - hides element, and makes it hidden only on MD screens
- .pi-hidden-lg-only - hides element, and makes it hidden only on MD screens
Text centering
- .pi-center-text-3xs - center element text on 3XS and less and less screens
- .pi-center-text-2xs - center element text on 2XS and less screens
- .pi-center-text-xs - center element text on XS and less screens
- .pi-center-text-sm - center element text on SM and less screens
- .pi-center-text-md - center element text on MD and less screens
- .pi-center-text-3xs-only - center element text only on 3XS screens
- .pi-center-text-2xs-only - center element text only on 2XS screens
- .pi-center-text-xs-only - center element text only on XS screens
- .pi-center-text-sm-only - center element text only on SM screens
- .pi-center-text-md-only - center element text only on MD screens
- .pi-center-text-lg-only - center element text only on MD screens