---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/referenz/css-klassen'
title: 'CSS-Klassenreferenz | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:14:09+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR-Builder-Inhalte nutzen Bootstrap-5-Klassen neben einigen eigenen Klassen. Diese Referenz listet die, die Sie am ehesten nutzen oder in CSS ansprechen.'
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:14:09+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: CSS-Klassenreferenz
      description: 'DXPR-Builder-Inhalte nutzen Bootstrap-5-Klassen neben einigen eigenen Klassen. Diese Referenz listet die, die Sie am ehesten nutzen oder in CSS ansprechen.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:14:09+0000'
      dateModified: '2026-10-24T14:14:09+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/referenz/css-klassen'
      articleSection: 'Elemente und CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/referenz/css-klassen'
      description: 'DXPR-Builder-Inhalte nutzen Bootstrap-5-Klassen neben einigen eigenen Klassen. Diese Referenz listet die, die Sie am ehesten nutzen oder in CSS ansprechen.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Referenz](/de/hc/documentation/learn-dxpr-builder/reference) /[Elemente und CSS](/de/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # CSS-Klassenreferenz.

 DXPR Builder lernenReferenzElemente und CSS

   ## In diesem Leitfaden

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

1. Wählen Sie das Element.
2. Öffnen Sie **More > Settings**.
3. 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:

```html
<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

```

Fügen Sie diese Klassen im **HTML classes**-Feld hinzu (im **General**-Bereich der Einstellungen), um die responsive Sichtbarkeit zu steuern.