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!
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
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
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
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.
CSS-Klassen
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
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
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
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
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
Last updated
Was this helpful?
