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: In Shopware 6.5 hat Shopware Bootstrap 4 durch Bootstrap 5 ersetzt. Ein paar Klassen unterscheiden sich daher abhängig von der verwendeten Shopware-Version. Du findest daher in machen Tabellen eine Spalte "... v4" und eine "... v5".

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.

---

Weiterführende Links

Get started with Bootstrapgetbootstrap

Bootstrap 5 Dokumentation

Introductiongetbootstrap

Bootstrap 4 Dokumentation