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!
Hinweis: Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe NEXT-29246). Dadurch überschreiben diese Klassen nicht mehr wie vorher jede vorgegebene Formatierungen.
Shopware 6.4
- In Shopware 6.4 nutzt die Storefront Bootstrap 4.
Shopware 6.5
- In Shopware 6.5 nutzt die Storefront Bootstrap 5.
Tipp: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "Bootstrap-Beispiele".
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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). 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
Bootstrap 5 Dokumentation
Bootstrap 4 Dokumentation