Skip to Main Content

Breadcrumb

Introduction

You can use the following helper classes anywhere in your app to fine-tune the responsive behavior of your page and components. For most Oracle APEX components, you can simply populate the CSS Classes property to apply these modifiers to your page components.

Breakpoints

Universal Theme uses the following breakpoints for responsive styles. You can apply these helper classes using the hidden-xxx-up or hidden-xxx-down helper classes.

Name Class Variable Details
XXS Screens xxs 640px and below
XS Screens xs 641px to 767px
Small Screens sm 768px to 991px
Medium Screens md 992px to 1199px
Large Screens lg 1200px and above

Classes

Use the hidden-xxx-up class to hide a given component when the viewport size is at the specified breakpoint or wider.

Similarly, use the hidden-xxx-down class to hide a given component when the viewport size is at the specified breakpoint or narrower.

XXS Screens ≤640px XS Screens >640 and <768px Small Screens ≥768px and <992px Medium Screens ≥992px and <1200px Large Screens ≥1200px
hidden-xxs-down Hidden Visible Visible Visible Visible
hidden-xs-down Hidden Hidden Visible Visible Visible
hidden-sm-down Hidden Hidden Hidden Visible Visible
hidden-md-down Hidden Hidden Hidden Hidden Visible
hidden-lg-down Hidden Hidden Hidden Hidden Hidden
hidden-xxs-up Hidden Hidden Hidden Hidden Hidden
hidden-xs-up Visible Hidden Hidden Hidden Hidden
hidden-sm-up Visible Visible Hidden Hidden Hidden
hidden-md-up Visible Visible Visible Hidden Hidden
hidden-lg-up Visible Visible Visible Visible Hidden

Note: These helper utilities are available in Oracle APEX 18.2 and later.

Examples

<div class="hidden-xs-up">
  This is displayed for screens below 640px only.
</div>

<div class="hidden-sm-down">
  This is hidden for small screens, and only visible when the screen is at least 992px wide.
</div>