README

Adds a minimum viewport breakpoint selector to all content elements. Elements are hidden below the chosen breakpoint using Bootstrap CSS utility classes (d-none d-{breakpoint}-block).

What does it do?

This extension adds a "Minimum Viewport" dropdown to the Appearance tab of every content element. When a breakpoint is selected, the element is only visible at that screen width and above.

No custom CSS is needed — it leverages Bootstrap 5 utility classes already included in the Bootstrap Package.

Breakpoints

Requirements

• TYPO3 CMS 11.5 – 14.x
• Bootstrap Package 14.x – 16.x
• PHP 8.1+

Installation

Via Composer (recommended)

composer require bkindler/bjk-responsive-visibility

Via TYPO3 Extension Manager

1. Download the extension ZIP file
2. Go to Admin Tools → Extensions
3. Click Upload Extension and select the ZIP file
4. Activate the extension

Include TypoScript

TYPO3 14 (Site Sets): Add the "Responsive Visibility" set to your site configuration.

TYPO3 11–13 (Static Templates): Include the static template "Responsive Visibility (bjk_responsive_visibility)" in your TypoScript template record.

Usage

1. Edit any content element
2. Switch to the Appearance tab
3. Select the desired Minimum Viewport breakpoint
4. Save — the element will only be visible at that screen width and above

How it works

The extension wraps content elements in a <div> with Bootstrap's responsive display utility classes. For example, selecting "From MD" produces:

<div class="d-none d-md-block">
    <!-- content element output -->
</div>

The d-none class hides the element by default, and d-md-block makes it visible again from the MD breakpoint (768px) upwards.

License

This extension is licensed under the GNU General Public License v2.0 or later.

Author

Björn Kindler

• Email: info@kindler-webservices.de
• GitHub: @bkindler