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!

Shopware 6.4

• In Shopware 6.4 nutzt die Storefront Bootstrap 4.

Shopware 6.5

• In Shopware 6.5 nutzt die Storefront .

Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst.

CSS-Klassen

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

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

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

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

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

Ü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

Mehr dazu findest du in der Bootstrap Dokumentation: .

CSS-Klassen

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen.

CSS-Klassen

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden.

CSS-Klassen

Beispiel

Mehr dazu findest du in der Bootstrap Dokumentation: .

Hinzufügen oder entfernen von Schatten zu CMS-Blöcken.

CSS-Klassen

Beispiele

Mehr dazu findest du in der Bootstrap Dokumentation: .

Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe ). 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.