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".
Tipp: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "Bootstrap-Beispiele" und "Erlebniswelten mit Bootstrap CSS-Klassen gestalten".
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

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

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

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

Ä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

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

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


Get started with Bootstrap
getbootstrap
Bootstrap 5 Dokumentation

Introduction
getbootstrap
Bootstrap 4 Dokumentation