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 |