#2186 Erlebniswelten mit Bootstrap CSS-Klassen gestalten

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!


Anwendungsbeispiele findest du bald in unseren Demoshops.


Inhaltsverzeichnis


Textausrichtung

Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst. Mehr dazu findest du hier.

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.

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.

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.

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)

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.

Beispiel:


Rahmenfarbe

Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen. Mehr dazu findest du hier.

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.

Beispiel:


Border-radius

Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden. Mehr dazu findest du hier.

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.

Klasse Bereich Funktionsbeschreibung
shadow-sm Block Kleiner Schlagschatten.
shadow Block Normaler Schlagschatten.
shadow-lg Block Großer Schlagschatten.

Beispiele:


Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

1f932d45e511a77e6298c48efaca3249
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen