# 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-bootstrap-css-klassen-gestalten.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.