The Joomla module class suffix system is a powerful system and a simple solution to hide specific modules at specific screen sizes is to add a module class suffix to a module you want to hide.

The Joomla 4 default front-end template is Cassiopeia which uses the Bootstrap library. If you want to show or hide some modules, the utility classes included in the Bootstrap will help you do just that.

Cassiopeia template is using Bootstrap 5, so you can just add a special class of Bootstrap 5 to the module to hide it for phones.

The way to add a module class suffix to a module:

  • Navigate to the module manager and edit the module you want to target
  • Click on the advanced module tab
  • Enter the module class you want to attach to that module eg "d-none d-lg-block"
  • Click Save

The Bootstrap 5 classes to hide or show modules on Joomla 4

The following classes of Bootstrap 5 can be added to modules to hide or display them on specific screen sizes.

To hide elements use:

  • the .d-none class;
  • or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

To show a module on a given interval of screen sizes combine one .d-*-none class with a .d-*-* class.

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
Hidden only on xxl .d-xxl-none .d-xxl-block
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 .d-xxl-none
Visible only on xxl .d-none .d-xxl-block

 

Find more details on display property included in Bootstrap 5 here.

Example - hiding on screens smaller than lg

class="d-none d-lg-block"

 

Leave module style - inherited

To test your class refresh your page and resize your browser window down to the necessary screen size, or open up your page on the corresponding device.

Bootstrap 5 breakpoints

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px