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

Download the extension ZIP file
Go to Admin Tools → Extensions
Click Upload Extension and select the ZIP file
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

Edit any content element
Switch to the Appearance tab
Select the desired Minimum Viewport breakpoint
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

bkindler/bjk-responsive-visibility

包简介

README 文档