---
url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'CSS-Architektur | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:04:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Builder-Inhalte sind Bootstrap-5-Markup plus ein kleiner Satz
  az--Klassen. Zu wissen, welche Klassen auf veröffentlichten Seiten
  erscheinen und welche nur existieren, während der Editor läuft, sagt
  Ihnen, worauf Ihr Theme-CSS zielen kann.
tags:
  - 'Architectuur en API’s'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T04:04:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: CSS-Architektur
      description: |-
        Builder-Inhalte sind Bootstrap-5-Markup plus ein kleiner Satz
        az--Klassen. Zu wissen, welche Klassen auf veröffentlichten Seiten
        erscheinen und welche nur existieren, während der Editor läuft, sagt
        Ihnen, worauf Ihr Theme-CSS zielen kann.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:04:43+0000'
      dateModified: '2026-10-24T04:04:43+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/documentation/learn-dxpr-builder/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        Builder-Inhalte sind Bootstrap-5-Markup plus ein kleiner Satz
        az--Klassen. Zu wissen, welche Klassen auf veröffentlichten Seiten
        erscheinen und welche nur existieren, während der Editor läuft, sagt
        Ihnen, worauf Ihr Theme-CSS zielen kann.
      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
---
[Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # CSS-Architektur.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

Builder-Inhalte sind Bootstrap-5-Markup plus ein kleiner Satz `az-`-Klassen. Zu wissen, welche Klassen auf veröffentlichten Seiten erscheinen und welche nur existieren, während der Editor läuft, sagt Ihnen, worauf Ihr Theme-CSS zielen kann.

## Klassen auf veröffentlichten Seiten

### Layout

| Markup | Klassen |
|---|---|
| Abschnitt | `az-section`, mit `container` oder `container-fluid` darin |
| Zeile | Bootstrap-`row` |
| Spalte | Bootstrap-`col-*`-Klassen, eine pro Breakpoint |
| Inhaltselement | Eine Klasse pro Elementtyp, etwa `az-text`, `az-image` oder `az-images-carousel`; Social Links nutzt `st-social`. Die meisten tragen außerdem `az-element`; Button und Image nicht |

Inhalte, die ältere Versionen gespeichert haben, können noch `az-row` und `az-column` tragen. Der Editor erkennt sie und lässt sie beim nächsten Speichern der Zeile oder Spalte weg.

### Modifikatoren

| Klasse | Gesetzt von |
|---|---|
| `az-row--equal-height` | **Equal-height columns** auf einer Zeile; ohne es erhält die Zeile `align-items-start` |
| `az-row--reverse-horizontal` | **Mirror row** auf einer Zeile |
| `az-util-vertical-centering` | **Vertical centering** auf einem Abschnitt oder einer Spalte |

### Bootstrap-Raster

Spalten nutzen die Rasterklassen von Bootstrap:

| Klasse | Breite |
|---|---|
| `col` | Teilt die Zeile gleichmäßig |
| `col-6` | 50 % |
| `col-md-4` | 33 % ab 768 px |
| `col-lg-3` | 25 % ab 992 px |

## Eigenes CSS schreiben

- Grenzen Sie Builder-spezifische Regeln auf `.az-section` oder auf die Typklassen ein, etwa `.az-text` oder `.az-button`. `.az-element` verfehlt Button und Image.
- Überschreiben Sie Bootstraps Rasterklassen nicht; der Editor setzt Spaltenbreiten über sie.
- Für einmaliges Styling fügen Sie eine Klasse im Feld **HTML classes** des Elements hinzu und stylen diese Klasse.

## Nur-Editor-Klassen

Diese Klassen existieren nur, während der Editor läuft, daher passen veröffentlichte Seiten nie auf sie:

| Klasse | Wo |
|---|---|
| `dxpr-builder-ui` | Jedes Stück Editor-Oberfläche: Steuerungsleisten, Menüs, Dialoge |
| `controls` | Die Steuerungsleiste eines Elements |
| `dxpr-editor` | Der Feld-Container in jedem Ansichtsmodus außer Preview |
| `az-ctnr` | Der Feld-Container, sobald der Editor gestartet ist |
| `az-sortable-placeholder` | Der Ablage-Platzhalter, während Sie ein Element ziehen |

Die eigenen Stile des Editors liegen in `dxpr_builder/css/dxpr_builder_backend.css`, gebaut aus `dxpr_builder/sass/dxpr_builder_backend.scss`.

## Bootstrap-Version

Der Builder schreibt Bootstrap-5-Markup. Wenn Ihr Theme kein Bootstrap 5 lädt, setzen Sie **Sideload Bootstrap files** auf **Bootstrap 5** unter **DXPR Studio > DXPR Builder > General Settings**, unter **Bootstrap**. **None (theme provides Bootstrap)** geht davon aus, dass Ihr Theme es lädt.