CSS Helper Classes

Updated 10 months 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: