CSS Helper Classes
Updated 1 year ago
Use CSS Helper classes to assign specific appearance and behavior thatĀ isn't covered by options, use space-separated CSS classes in a single field to add multiple classes.
Global classes #
Global classes can be applied to any theme element via its settings
hidden #
This class hides the desired element completely by assigning display: none !important CSS property to it
vc_hidden-lg
vc_hidden-md
vc_hidden-sm
vc_hidden-xs #
These classes hide desired element by assigning display: none !important CSS property for different screen widths:
- vc_hidden-lg - on screen width above 1200px
- vc_hidden-md - on screen width between 992 and 1199px
- vc_hidden-sm - on screen width between 768 and 991px
- vc_hidden-xs - on screen width below 767px
text_thin #
This class changes the font-weight of text for the desired element (and for its inner elements) by assigning font-weight: 300 CSS property
text_bold #
This class changes font-weight of text for the desired element (and for its inner elements) by assigning font-weight: 700 CSS property
highlight_primary #
This class applies primary text color to the desired element (and for its inner elements) by assigning color CSS property, the value will be taken from Theme Options > Colors > Content colors > Primary color
highlight_secondary #
This class applies secondary text color to the desired element (and for its inner elements) by assigning color CSS property, the value will be taken from Theme Options > Colors > Content colors > Secondary color
highlight_faded #
This class applies faded text color to the desired element (and for its inner elements) by assigning color CSS property, the value will be taken from Theme Options > Colors > Content colors > Faded color
highlight_white #
This class applies white text color to the desired element (and for its inner elements) by assigning color: #fff CSS property
highlight_black #
This class applies black text color to the desired element (and for its inner elements) by assigning color: #000 CSS property
highlight_primary_bg
highlight_secondary_bg
highlight_faded_bg
highlight_dark_bg
highlight_light_bg #
These classes are useful when you need to highlight some text with a background color. These classes apply display: inline-block; padding: 0.5rem 1rem; CSS properties and relevant color values
Row classes #
Row classes can be applied to the Row element only (not Inner Row) via the "Extra class name" field
reset-margins #
This class aligns columns with backgrounds when you are using "Default" Columns Layout, take a look at the next examples:
Default settings:
With "reset-margins" class: