Grid Layout - Universal Theme

Overview

Universal Theme uses a 12 columns grid layout system for arranging components on a page.

Understanding this grid system will allow you to create thoughful designs and personalize the responsive experience of your applications.

Toggle Layout Columns

Click the Toggle Layout Columns button to overlay the grid behind this page.

Demo

1 Column

2 Columns

3 Columns

4 Columns

6 Columns

Responsive Design

Universal Theme is responsive out of the box. For more control on your application responsive behavior, read on the additional Universal Theme responsive options.

Responsive Classes

You can fine tune the responsive behavior of the components on your page by modifying the Column CSS Classes property of your components.

	All	XX Small	X Small	Small	Medium	Large	X Large	XX Large
Range	All	479px and below	480px to 639px	640px to 767px	768px to 991px	992px to 1199px	1200px to 1399px	1400px and above
CSS Class Prefix	.col-	.col-xxs-	.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
Number of Columns	12
Gutter	1rem (0.5rem each side)

1 - 4

Visibility Classes

Use the following classes to hide a given component when the viewport size is at the specified breakpoint.

	XXS 479px and below	XS 480px to 639px	Small 640px to 767px	Medium 768px to 991px	Large 992px and above
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.

Demo

Every region below uses the following responsive CSS Classes: col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-1

Resize this window to experience the responsiveness of this page.

Column