---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'CSS-architectuur | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:32:57+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Builderinhoud is Bootstrap 5-markup plus een kleine set az-
  klassen. Als je weet welke klassen op gepubliceerde pagina's voorkomen, en welke
  alleen bestaan terwijl de editor draait, weet je waarop de CSS van je thema zich
  kan richten.
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-24T02:32:57+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: CSS-architectuur
      description: |-
        Builderinhoud is Bootstrap 5-markup plus een kleine set az-
        klassen. Als je weet welke klassen op gepubliceerde pagina's voorkomen, en welke
        alleen bestaan terwijl de editor draait, weet je waarop de CSS van je thema zich
        kan richten.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:32:57+0000'
      dateModified: '2026-10-24T02:32:57+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/nl/hc/documentation/learn-dxpr-builder/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        Builderinhoud is Bootstrap 5-markup plus een kleine set az-
        klassen. Als je weet welke klassen op gepubliceerde pagina's voorkomen, en welke
        alleen bestaan terwijl de editor draait, weet je waarop de CSS van je thema zich
        kan richten.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[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-architectuur.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

Builderinhoud is Bootstrap 5-markup plus een kleine set `az-`klassen. Als je weet welke klassen op gepubliceerde pagina's voorkomen, en welke alleen bestaan terwijl de editor draait, weet je waarop de CSS van je thema zich kan richten.

## Klassen op gepubliceerde pagina's

### Lay-out

| Markup | Klassen |
|---|---|
| Sectie | `az-section`, met `container` of `container-fluid` erin |
| Rij | Bootstrap `row` |
| Kolom | Bootstrap `col-*`-klassen, één per breakpoint |
| Inhoudselement | Eén klasse per elementtype, zoals `az-text`, `az-image` of `az-images-carousel`; Social Links gebruikt `st-social`. De meeste dragen ook `az-element`; Button en Image niet |

Inhoud die met oudere versies is opgeslagen kan nog `az-row` en `az-column` bevatten. De editor herkent ze en laat ze weg zodra de rij of kolom opnieuw wordt opgeslagen.

### Modifiers

| Klasse | Ingesteld door |
|---|---|
| `az-row--equal-height` | **Equal-height columns** op een rij; zonder deze krijgt de rij `align-items-start` |
| `az-row--reverse-horizontal` | **Mirror row** op een rij |
| `az-util-vertical-centering` | **Vertical centering** op een sectie of kolom |

### Bootstrap-grid

Kolommen gebruiken de gridklassen van Bootstrap:

| Klasse | Breedte |
|---|---|
| `col` | Deelt de rij in gelijke delen |
| `col-6` | 50% |
| `col-md-4` | 33% vanaf 768 px |
| `col-lg-3` | 25% vanaf 992 px |

## Aangepaste CSS schrijven

- Richt builderspecifieke regels op `.az-section` of op de typeklassen, zoals `.az-text` of `.az-button`. `.az-element` dekt Button en Image niet af.
- Overschrijf de gridklassen van Bootstrap niet; de editor stelt er kolombreedtes mee in.
- Voeg voor eenmalige styling een klasse toe in het veld **HTML classes**van het element en geef die klasse stijl.

## Klassen alleen voor de editor

Deze klassen bestaan alleen terwijl de editor draait, dus gepubliceerde pagina's matchen er nooit mee:

| Klasse | Waar |
|---|---|
| `dxpr-builder-ui` | Elk stukje editorinterface: besturingsbalken, menu's, dialogen |
| `controls` | De besturingsbalk van een element |
| `dxpr-editor` | De veldcontainer in elke weergavemodus behalve Preview |
| `az-ctnr` | De veldcontainer zodra de editor is gestart |
| `az-sortable-placeholder` | De drop-placeholder terwijl je een element sleept |

De eigen stijlen van de editor staan in `dxpr_builder/css/dxpr_builder_backend.css`, gebouwd uit `dxpr_builder/sass/dxpr_builder_backend.scss`.

## Bootstrap-versie

De builder schrijft Bootstrap 5-markup. Als je thema geen Bootstrap 5 laadt, zet je **Sideload Bootstrap files** op **Bootstrap 5** bij **DXPR Studio > DXPR Builder > General Settings**, onder **Bootstrap**. **None (theme provides Bootstrap)** gaat ervan uit dat je thema het laadt.