DXPR-Builder-Inhalte nutzen Bootstrap-5-Klassen neben einigen eigenen Klassen. Diese Referenz listet die, die Sie am ehesten nutzen oder in CSS ansprechen.
Eigene Klassen hinzufügen
- Wählen Sie das Element.
- Öffnen Sie More > Settings.
- Wählen Sie im General-Bereich Klassen im HTML classes-Feld. Um einen Klassennamen einzutippen, klicken Sie auf Edit as text und trennen Sie Klassen mit Leerzeichen.
Bootstrap-Rasterklassen
Container-Klassen
| Klasse |
Beschreibung |
.container |
Container fester Breite, zentriert |
.container-fluid |
Container in voller Breite |
Zeilen- und Spaltenklassen
| Klasse |
Beschreibung |
.row |
Flex-Container für Spalten |
.col-{n} |
Spalte über n/12 der Zeile |
.col-sm-{n} |
Spaltenbreite bei small (576px+) |
.col-md-{n} |
Spaltenbreite bei medium (768px+) |
.col-lg-{n} |
Spaltenbreite bei large (992px+) |
.col-xl-{n} |
Spaltenbreite bei XL (1200px+) |
Bootstrap-Abstands-Utilities
Margin
| Klasse |
Beschreibung |
.m-{0-5} |
Margin auf allen Seiten |
.mt-{0-5} |
Margin oben |
.mb-{0-5} |
Margin unten |
.ms-{0-5} |
Margin am Start (links in LTR) |
.me-{0-5} |
Margin am Ende (rechts in LTR) |
.mx-{0-5} |
Margin links und rechts |
.my-{0-5} |
Margin oben und unten |
Padding
| Klasse |
Beschreibung |
.p-{0-5} |
Padding auf allen Seiten |
.pt-{0-5} |
Padding oben |
.pb-{0-5} |
Padding unten |
.ps-{0-5} |
Padding am Start |
.pe-{0-5} |
Padding am Ende |
.px-{0-5} |
Padding links und rechts |
.py-{0-5} |
Padding oben und unten |
Bootstrap-Text-Utilities
| Klasse |
Beschreibung |
.text-start |
Linksbündiger Text |
.text-center |
Zentrierter Text |
.text-end |
Rechtsbündiger Text |
.fw-bold |
Fetter Text |
.fw-light |
Leichter Text |
.fst-italic |
Kursiver Text |
.text-uppercase |
Text in Versalien |
.text-lowercase |
Text in Gemeinen |
.fs-1 bis .fs-6 |
Schriftgröße (1 am größten) |
Bootstrap-Farb-Utilities
Textfarben
| Klasse |
Beschreibung |
.text-primary |
Theme-Primärfarbe |
.text-secondary |
Theme-Sekundärfarbe |
.text-success |
Grün (Erfolg) |
.text-danger |
Rot (Gefahr/Fehler) |
.text-warning |
Gelb (Warnung) |
.text-info |
Cyan (Information) |
.text-muted |
Grauer, gedeckter Text |
.text-white |
Weißer Text |
Hintergrundfarben
| Klasse |
Beschreibung |
.bg-primary |
Primär-Hintergrund |
.bg-secondary |
Sekundär-Hintergrund |
.bg-success |
Grüner Hintergrund |
.bg-danger |
Roter Hintergrund |
.bg-warning |
Gelber Hintergrund |
.bg-info |
Cyan-Hintergrund |
.bg-light |
Hellgrauer Hintergrund |
.bg-dark |
Dunkler Hintergrund |
Bootstrap-Display-Utilities
| Klasse |
Beschreibung |
.d-none |
Element ausblenden |
.d-block |
Block-Darstellung |
.d-inline |
Inline-Darstellung |
.d-sm-none |
Ausblenden ab small |
.d-md-block |
Anzeigen ab medium |
.d-lg-none |
Ausblenden ab large |
DXPR-Builder-Klassen
Elementklassen
| Klasse |
Beschreibung |
.az-element |
Basisklasse auf den meisten Inhalts-Elementen; Button und Image tragen sie nicht, adressieren Sie stattdessen: .az-<type>. |
.az-<type> |
Eine Klasse pro Elementtyp, etwa .az-text, .az-image oder .az-images-carousel; Social Links nutzt .st-social |
.az-section |
Section-Element |
.row |
Row-Element (Bootstrap); Inhalte aus älteren Versionen können auch Folgendes enthalten: .az-row |
.col-* |
Column-Element (Bootstrap); Inhalte aus älteren Versionen können auch Folgendes enthalten: .az-column |
Animationsklassen
Animationen nutzen die animate.css-Namen. Während ein Element animiert, hat es:
| Klasse |
Beschreibung |
.animated |
Hinzugefügt, während die Animation läuft |
.infinite |
Hinzugefügt, wenn Infinite an ist |
Animationsname, etwa .fadeIn |
Der Animation in oder Animation out-Effekt, der gerade abgespielt wird |
Variantenklassen
| Klasse |
Beschreibung |
.az-variant-container |
A/B-Test-Container, zusammen mit .rl-experiment |
.az-variant-wrapper |
Jeder Variant-Arm |
.az-variant-original |
Der Original-Arm (A) |
.az-variant-1, .az-variant-2 |
Arme B, C usw. |
.az-variant-active |
Der gerade gezeigte Arm |
Klassen für Responsive Visibility nutzen
Kombinieren Sie Bootstrap-Display-Utilities, um Inhalte bei bestimmten Bildschirmgrößen zu zeigen oder auszublenden:
Fügen Sie diese Klassen im HTML classes-Feld hinzu (im General-Bereich der Einstellungen), um die responsive Sichtbarkeit zu steuern.
