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!
Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

Textausrichtung

Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst. Mehr dazu findest du hier.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
text-left
Block
Text linksbündig ausrichten.
text-center
Block
Text zentriert ausrichten.
text-right
Block
Text rechts ausrichten.
Beispiele

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. Mehr dazu findest du hier.
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

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). Mehr dazu findest du hier.
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

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. Mehr dazu findest du hier.
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
Bereich
Funktionsbeschreibung
border
Block
Rahmen hinzufügen.
border-top
Block
Rahmen oben hinzufügen.
border-right
Block
Rahmen rechts hinzufügen.
border-bottom
Block
Rahmen unten hinzufügen.
border-left
Block
Rahmen links hinzufügen.

Rahmen (subtraktiv)

CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
border-0
Block
Rahmen entfernen.
border-top-0
Block
Rahmen oben entfernen.
border-right-0
Block
Rahmen rechts entfernen.
border-bottom-0
Block
Rahmen unten entfernen.
border-left-0
Block
Rahmen links entfernen.
Beispiele

Rahmenfarbe

Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen. Mehr dazu findest du hier.
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

Border-radius

Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden. Mehr dazu findest du hier.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
rounded
Block
Element abrunden.
rounded-top
Block
Element oben abrunden.
rounded-right
Block
Element recht abrunden.
rounded-bottom
Block
Element unten abrunden.
rounded-left
Block
Element links abrunden.
rounded-0
Block
Element nicht abrunden.
Beispiel

Schatten

Hinzufügen oder entfernen von Schatten zu CMS-Blöcken. Mehr dazu findest du hier.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
shadow-sm
Block
Kleiner Schlagschatten.
shadow
Block
Normaler Schlagschatten.
shadow-lg
Block
Großer Schlagschatten.
Beispiele
Introduction
getbootstrap
Bootstrap 4 Dokumentation