Drop us a message
You're at the right place now! How can we help?
In Quadra, you can hide or show the elements you want for the resolution you want. Very simple classes are available for this purpose. For example; With the .visible-lg class you can make an element visible only on large screens. Or you can hide it on mobile devices with the .hidden-xs class.
These elements are not limited to an image or link. You can hide an alll-section if you want. And you can have a professional look on all devices & screen sizes.
In addition, this feature "flex, inline-flex, block, inline-block, inline" you can use with display types. For example, ".d-xl-flex" or ".d-md-block". You can do this with Bootstrap 5+ classes and Quadra's helper classes. You can see all the detailed descriptions and tables below.
This table is created for elements with "block" display type. You can use all "block" classes for "flex", "inline", "inline-flex" and "inline-block". This table is from the Bootstrap 5 documentation. You can see more here. You can use all of these Bootstrap 5+ features in Quadra.
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
You can copy classes with click on rows. You can also see this table and more shortcuts in the Bootstrap documentation.
In the table below you can see the "visible" classes and the resolution at which they work. Visible classes give the "display: block !important;" style to elements. You can do this with "flex" system too. You can see it on here.
|
Extra Small Screens (<576px) |
Small Screens (576px - 768px) |
Medium Screens (768px - 992px) |
Large Screens (>992px) |
Extra Large Screens (>1200px) |
|
|---|---|---|---|---|---|
.visible-xs |
|||||
.visible-sm |
|||||
.visible-md |
|||||
.visible-lg |
|||||
.visible-xl |
You can copy classes with click on rows.
In the table below you can see the hidden classes and their resolution. Hidden classes give the "display: none !important;" style to elements.
|
Extra Small Screens (<576px) |
Small Screens (576px - 768px) |
Medium Screens (768px - 992px) |
Large Screens (>992px) |
Extra Large Screens (>1200px) |
|
|---|---|---|---|---|---|
.hidden-xs |
|||||
.hidden-sm |
|||||
.hidden-md |
|||||
.hidden-lg |
|||||
.hidden-xl |
You can copy classes with click on rows.
As a shortcut, you can choose how the elements display according to screen sizes. The lists are as follows;
Flex and inline flex shortcodes;
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Block and inline block shortcodes;
.d-block
.d-inline-block
.d-sm-block
.d-sm-inline-block
.d-md-block
.d-md-inline-block
.d-lg-block
.d-lg-inline-block
.d-xl-block
.d-xl-inline-block
You're at the right place now! How can we help?