> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten-mit-bootstrap.md).

# Responsive Erlebniswelten mit Bootstrap

{% hint style="warning" %}
**Achtung**: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
{% endhint %}

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer **HC-Architecture®** ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.

Nachfolgend stellen wir dir die entsprechenden CSS-Klassen vor und zeigen dir ein paar Anwendungsbeispiele.

## Elemente für Viewports ein-/ausblenden

Um Erlebniswelt-Blöcke in bestimmten Viewports ein- oder auszublenden, können die nachfolgenden Bootstrap Display-CSS-Klassen genutzt werden. Damit lassen sich beispielsweise Bild-Elemente für verschiedene Viewports optimieren.

{% hint style="success" %}
**Tipp**: Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen: siehe [Responsive Erlebniswelten erstellen](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten.md)
{% endhint %}

Übersicht der Bootstrap Display-CSS-Klassen:

```
Element immer ausblenden:     d-none

Element anzeigen bis 576px:   d-block d-sm-none
Element anzeigen bis 768px:   d-block d-md-none
Element anzeigen bis 992px:   d-block d-lg-none
Element anzeigen bis 1200px:  d-block d-xl-none

Element anzeigen ab 576px:   d-none d-sm-block
Element anzeigen ab 768px:   d-none d-md-block
Element anzeigen ab 992px:   d-none d-lg-block
Element anzeigen ab 1200px:  d-none d-xl-block

Element anzeigen von 0px bis 576px:     d-block d-sm-none
Element anzeigen von 578px bis 768px:   d-none d-sm-block d-md-none
Element anzeigen von 769px bis 992px:   d-none d-md-block d-lg-none
Element anzeigen von 993px bis 1200px:  d-none d-lg-block d-xl-none
```

Diese CSS-Klassen kannst du im Erlebniswelt-Editor über das Feld "**CSS-Klassen**" in den Block-Einstellungen bzw. Sektion-Einstellungen hinzufügen.

{% hint style="info" %}
**Hinweis**: Diese CSS-Klassen machen Sektionen und Blöcke lediglich unsichtbar, der entsprechende HTML-Code ist nach wie vor in der Storefront vorhanden.
{% endhint %}

### Beispiel: Bild-Element in der Sidebar auf Smartphones ausblenden

In diesem Abschnitt integrieren wir ein Bildelement in die Sidebar, welches auf einen Rabatt aufmerksam macht. Im Smartphone-Viewport würde das Motiv zu viel Platz einnehmen, darum blenden wir es für diesen Viewport aus.

{% hint style="success" %}
**Tipp**: Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du in unserem [Demoshop](https://demo.themeware.design/modern/Hoehenluft-Abenteuer/).
{% endhint %}

#### Schritt 1: Erlebniswelt bearbeiten

* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.

#### Schritt 1.1: Block anlegen

* Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop zur Sidebar hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
  * **Block-Name**: Banner
  * **CSS-Klassen**: `d-none d-lg-block`

#### Schritt 1.3: Element(e) des Blocks konfigurieren

Konfiguriere nun das Element in diesem Block.

* **Bild**: Wähle dein gewünschtes Motiv mit einer Breite von ca. 400px aus.
* **Anzeigemodus**: Strecken

> **Tipp**: Mit den CSS-Klassen `d-none d-lg-block` kannst du auch die Sidebar-Navigation für mobile Viewports ausblenden.

### Beispiel: Banner für verschiedene Viewports erstellen

In diesem Abschnitt erstellen wir zwei Varianten eines Banners mit jeweils verschiedenen Bildgrößen für zwei unterschiedliche Viewports.

#### Schritt 1: Erlebniswelt bearbeiten

* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.

#### Schritt 1.1: Block anlegen

* Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop der Erlebniswelt hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
  * **Block-Name**: Banner
  * **CSS-Klassen**: `d-none d-sm-block`

#### Schritt 1.2: Element(e) des Blocks konfigurieren

Konfiguriere nun das Element in diesem Block.

* **Bild**: Wähle dein gewünschtes Motiv mit einer Breite ca. 1920px aus.
* **Anzeigemodus**: Standard

#### Schritt 1.3: Block anlegen

* Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop der Erlebniswelt hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* **Block-Name**: Banner Mobil
* **CSS-Klassen**: `d-block d-sm-none`

#### Schritt 1.4: Element(e) des Blocks konfigurieren

Konfiguriere nun das Element in diesem Block.

* **Bild**: Wähle dein gewünschtes Motiv mit einer Breite von ca. 580px aus.
* **Anzeigemodus**: Strecken

> **Tipp**: Du kannst auch ein drittes Bild-Element für den Tablet-Viewport ergänzen.

{% hint style="warning" %}
**Wichtig**: Bitte beachte, dass Bilder erheblich den Page-Speed beeinflussen können und komprimiere diese so gut wie möglich mit Online-Tools wie [TinyPNG](https://tinypng.com).
{% endhint %}

### Beispiel: Abstände für verschiedene Viewports definieren

Mit Abstandsklassen kannst du Abstände von Erlebniswelt-Elementen je Viewports definieren. Nachfolgend zeigen wir dir ein Anwendungs-Beispiel:

Dieser Abschnitt folgt...

#### Weiterführende Informationen

{% hint style="info" %}
**Hinweis**: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel [Erlebniswelten mit Bootstrap CSS-Klassen optimieren](/wissensdatenbank/profiwissen/erlebniswelten-mit-bootstrap-css-klassen-optimieren.md).
{% endhint %}