# Erlebniswelten mit Bootstrap CSS-Klassen gestalten
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap.
Auf dieser Seite findest du die gängigsten Bootstrap-Klassen welche du auf CMS-Blöcke in deinen Erlebniswelten anwenden kannst. Ganz ohne Programmierkenntnisse!
{% hint style="info" %}
**Hinweis**: Shopware hat mit Version 6.6.0 `!important` Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). Dadurch überschreiben diese Klassen nicht mehr wie vorher jede vorgegebene Formatierungen.
{% endhint %}
#### Shopware 6.4
* In Shopware 6.4 nutzt die Storefront [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/).
#### Shopware 6.5
* In Shopware 6.5 nutzt die Storefront [Bootstrap 5](https://getbootstrap.com/docs/5.2/getting-started/introduction/).
{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "[Bootstrap-Beispiele](https://demo.themeware.design/modern/Service/Bootstrap-Beispiele/)".
{% endhint %}
***
## Textausrichtung
Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst.
**CSS-Klassen**
| Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung |
| --------------- | ----------- | ------- | ---------------------------- |
| **text-start** | text-left | Block | Text linksbündig ausrichten. |
| **text-center** | text-center | Block | Text zentriert ausrichten. |
| **text-end** | text-right | Block | Text rechts ausrichten. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Text alignment](https://getbootstrap.com/docs/5.2/utilities/text/#text-alignment).
***
## Textfarbe
Zum Einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten.
**CSS-Klassen**
| Klasse | Bereich | Funktionsbeschreibung |
| ------------------ | ------- | ----------------------------------------- |
| **text-primary** | Block | Text in der Primärfarbe ausgeben. |
| **text-secondary** | Block | Text in der Sekundärfarbe ausgeben. |
| **text-success** | Block | Text in der Farbe "Erfolg" ausgeben. |
| **text-danger** | Block | Text in der Farbe "Fehler" ausgeben. |
| **text-warning** | Block | Text in der Farbe "Hinweis" ausgeben. |
| **text-info** | Block | Text in der Farbe "Information" ausgeben. |
| **text-white** | Block | Text in der Farbe "Weiß" ausgeben. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Colors](https://getbootstrap.com/docs/5.2/utilities/colors/).
***
## Hintergrundfarbe
Das Bootstrap-Framework liefert dir auch Klassen zum einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben).
**CSS-Klassen**
| Klasse | Bereich | Funktionsbeschreibung |
| ---------------- | ------- | --------------------------------------------------- |
| **bg-primary** | Block | Hintergrund mit der Primärfarbe darstellen. |
| **bg-secondary** | Block | Hintergrund mit der Sekundärfarbe darstellen. |
| **bg-success** | Block | Hintergrund mit der Farbe "Erfolg" darstellen. |
| **bg-danger** | Block | Hintergrund mit der Farbe "Fehler" darstellen. |
| **bg-warning** | Block | Hintergrund mit der Farbe "Hinweis" darstellen. |
| **bg-info** | Block | Hintergrund mit der Farbe "Information" darstellen. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Background](https://getbootstrap.com/docs/5.2/utilities/background/).
***
## Rahmen (additiv)
Über Bootstrap-Klassen können auch die Rahmen von CMS-Blöcken definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen.
{% hint style="info" %}
**Hinweis**: Bitte beachte, dass das "ThemeWare® CMS-Styling" bereits einen Rahmen darstellt und additive CSS-Klassen dann keine Auswirkung haben. Additive CSS-Klassen sind für Erlebniswelten ohne "ThemeWare® CMS-Styling" relevant.
{% endhint %}
**CSS-Klassen**
| Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung |
| ----------------- | ------------- | ------- | ------------------------- |
| **border** | border | Block | Rahmen hinzufügen. |
| **border-top** | border-top | Block | Rahmen oben hinzufügen. |
| **border-end** | border-right | Block | Rahmen rechts hinzufügen. |
| **border-bottom** | border-bottom | Block | Rahmen unten hinzufügen. |
| **border-start** | border-left | Block | Rahmen links hinzufügen. |
Mehr dazu findest du in der Bootstrap Dokumentation: [Borders](https://getbootstrap.com/docs/5.2/utilities/borders/).
***
## Rahmen (subtraktiv)
**CSS-Klassen**
| Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung |
| ------------------- | --------------- | ------- | ------------------------ |
| **border-0** | border-0 | Block | Rahmen entfernen. |
| **border-top-0** | border-top-0 | Block | Rahmen oben entfernen. |
| **border-end-0** | border-right-0 | Block | Rahmen rechts entfernen. |
| **border-bottom-0** | border-bottom-0 | Block | Rahmen unten entfernen. |
| **border-start-0** | border-left-0 | Block | Rahmen links entfernen. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Subtractive](https://getbootstrap.com/docs/5.2/utilities/borders/#subtractive).
***
## Rahmenfarbe
Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen.
**CSS-Klassen**
| Klasse | Bereich | Funktionsbeschreibung |
| -------------------- | ------- | ---------------------------------------------- |
| **border-primary** | Block | Rahmen mit der Primärfarbe darstellen. |
| **border-secondary** | Block | Rahmen mit der Sekundärfarbe darstellen. |
| **border-success** | Block | Rahmen mit der Farbe "Erfolg" darstellen. |
| **border-danger** | Block | Rahmen mit der Farbe "Fehler" darstellen. |
| **border-warning** | Block | Rahmen mit der Farbe "Hinweis" darstellen. |
| **border-info** | Block | Rahmen mit der Farbe "Information" darstellen. |
| **border-light** | Block | Rahmen mit der Farbe "Hell" darstellen. |
| **border-dark** | Block | Rahmen mit der Farbe "Dunkel" darstellen. |
| **border-white** | Block | Rahmen mit der Farbe "Weiß" darstellen. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Color](https://getbootstrap.com/docs/5.2/utilities/borders/#color).
***
## Border-radius
Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden.
**CSS-Klassen**
| Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung |
|---|
| rounded | rounded | Block | Element abrunden. |
| rounded-top | rounded-top | Block | Element oben abrunden. |
| rounded-end | rounded-right | Block | Element recht abrunden. |
| rounded-bottom | rounded-bottom | Block | Element unten abrunden. |
| rounded-start | rounded-left | Block | Element links abrunden. |
| rounded-0 | rounded-0 | Block | Element nicht abrunden. |
**Beispiel**
Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Radius](https://getbootstrap.com/docs/5.2/utilities/borders/#radius).
***
## Schatten
Hinzufügen oder entfernen von Schatten zu CMS-Blöcken.
**CSS-Klassen**
| Klasse | Bereich | Funktionsbeschreibung |
| ------------- | ------- | ------------------------ |
| **shadow-sm** | Block | Kleiner Schlagschatten. |
| **shadow** | Block | Normaler Schlagschatten. |
| **shadow-lg** | Block | Großer Schlagschatten. |
**Beispiele**
Mehr dazu findest du in der Bootstrap Dokumentation: [Shadows](https://getbootstrap.com/docs/5.2/utilities/shadows/).
***
## Besonderheit: CMS-Blöcke mit ThemeWare® CMS-Styling
Shopware hat mit Version 6.6.0 `!important` Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben.
Möchtest du **Bootstrap CSS-Klassen** auf **CMS-Blöcke** anwenden, beachte bitte, dass das ThemeWare® CMS-Styling den Rahmen (border, border-radius), die Hintergrundfarbe (background-color) und den Außenabstand nach unten (margin-bottom) überschreibt.
Entferne daher das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse `twt-cms-block-reset`, damit die Bootstrap-Klassen wirken.
***
## Weiterführende Informationen
{% embed url="" %}
Bootstrap 5 Dokumentation
{% endembed %}
{% embed url="" %}
Bootstrap 4 Dokumentation
{% endembed %}