bkindler/bjk-responsive-visibility

Adds a minimum viewport breakpoint selector to all content elements. Elements are hidden below the chosen breakpoint using Bootstrap CSS utility classes.

v1.0.1 2026-02-23 16:16 UTC

Requires

• bk2k/bootstrap-package: ^13.0 || ^14.0 || ^15.0 || ^16.0
• typo3/cms-core: ^11.5 || ^12.4 || ^13.0 || ^14.0

GPL-2.0-or-later

• Björn Kindler

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

Option	Min-Width	CSS Classes Applied
Always visible	—	None (no wrapper)
From SM	≥ 576px	d-none d-sm-block
From MD	≥ 768px	d-none d-md-block
From LG	≥ 992px	d-none d-lg-block
From XL	≥ 1200px	d-none d-xl-block
From XXL	≥ 1400px	d-none d-xxl-block

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: [e-mail]
• GitHub: @bkindler