v6.5.0
SucheService PortalHandbuchSonstigesSupport anfordern
Search
⌃K
Links

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" und "Erlebniswelten mit Bootstrap CSS-Klassen gestalten".

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.
Introduction
getbootstrap
Bootstrap 4 Dokumentation
Previous
CSS-Abstandsklassen für Erlebniswelten
Next
Erlebniswelten mit CSS-Animationen verschönern
Last modified 3d ago