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
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.
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
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?