back to main Purchase

Visibiliy

https://getbootstrap.com/docs/5.1/utilities/position/

src/scss/_core/utils/_visibility.scss

src/scss/_core/utils/_visibility_oldbs.scss

Text Color

Class Description Quick Example
.hide .hide-force
.show-hover-*
Old Boostrap
.hidden-*-[up|down]
Boostrap classes
.visible .invisible

.hide using just display: none;
.hide-force using display: none !important;

.show-hover-* used to show hidden elements on mouse over. Note: desktop only! Always visible on mobile devices!

Visible on mobile
.show-hover-container (main container)
.show-hover-item (item to be hidden by default; visible on hover)

All devices, same behaviour
.show-hover-container-all (main container)
.show-hover-item-all (item to be hidden by default; visible on hover)

.hidden-*-[up|down] are the classes removed in Bootstrap 4. For some people is more handy to use them than combinations of .d-block .d-none new bootstrap classes. So you can use .hidden-md-down, .hidden-xs-up, etc. Smarty layouts are not using them by default!.

If you don't want them, you can comment/remove them in your production: _core/utils/_visibility_oldbs.scss

Hover this container
.show-hover-item