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 Informationen

Get started with Bootstrapgetbootstrap

Bootstrap 5 Dokumentation

Introductiongetbootstrap

Bootstrap 4 Dokumentation