Joomla: Hiding modules based on screen size

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

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