Erlebniswelten mit Bootstrap CSS-Klassen gestalten
In dieser Anleitung erfährst du, wie du Erlebniswelten mit Bootstrap CSS-Klassen gestalten kannst.
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 Links
Last updated
