Skip to Main Content

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
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
3 Columns
3 Columns
3 Columns
3 Columns
4 Columns
4 Columns
4 Columns
6 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.

AllXX SmallX SmallSmallMediumLargeX LargeXX Large
RangeAll479px and below480px to 639px640px to 767px768px to 991px992px to 1199px1200px to 1399px1400px and above
CSS Class Prefix.col-.col-xxs-.col-xs-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
Number of Columns12
Gutter1rem (0.5rem each side)

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

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
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column