---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'Arquitectura CSS | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:18:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  El contenido del constructor es marcado Bootstrap 5 más un pequeño conjunto de
  clases az-. Saber qué clases aparecen en páginas publicadas, y cuáles
  solo existen mientras el editor funciona, dice a qué puede apuntar el CSS de
  tu tema.
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-24T11:18:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Arquitectura CSS'
      description: |-
        El contenido del constructor es marcado Bootstrap 5 más un pequeño conjunto de
        clases az-. Saber qué clases aparecen en páginas publicadas, y cuáles
        solo existen mientras el editor funciona, dice a qué puede apuntar el CSS de
        tu tema.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:18:17+0000'
      dateModified: '2026-10-24T11:18:17+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/es/hc/documentation/learn-dxpr-builder/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        El contenido del constructor es marcado Bootstrap 5 más un pequeño conjunto de
        clases az-. Saber qué clases aparecen en páginas publicadas, y cuáles
        solo existen mientras el editor funciona, dice a qué puede apuntar el CSS de
        tu tema.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/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) # Arquitectura CSS.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

El contenido del constructor es marcado Bootstrap 5 más un pequeño conjunto de clases `az-`. Saber qué clases aparecen en páginas publicadas, y cuáles solo existen mientras el editor funciona, dice a qué puede apuntar el CSS de tu tema.

## Clases en páginas publicadas

### Diseño

| Marcado | Clases |
|---|---|
| Section | `az-section`, con `container` o `container-fluid` dentro |
| Row | La fila Bootstrap `row` |
| Column | Clases `col-*` de Bootstrap, una por breakpoint |
| Content element | Una clase por tipo de elemento, como `az-text`, `az-image` o `az-images-carousel`; Social Links usa `st-social`. La mayoría también lleva `az-element`; Button e Image no |

El contenido guardado por versiones viejas aún puede llevar `az-row` y `az-column`. El editor los reconoce y los deja fuera la próxima vez que la fila o columna se guarda.

### Modificadores

| Clase | Fijada por |
|---|---|
| `az-row--equal-height` | **Equal-height columns** en una fila; sin él la fila recibe `align-items-start` |
| `az-row--reverse-horizontal` | **Mirror row** en una fila |
| `az-util-vertical-centering` | **Vertical centering** en una sección o columna |

### Cuadrícula Bootstrap

Las columnas usan las clases de cuadrícula de Bootstrap:

| Clase | Ancho |
|---|---|
| `col` | Comparte la fila a partes iguales |
| `col-6` | 50% |
| `col-md-4` | 33% desde 768 px |
| `col-lg-3` | 25% desde 992 px |

## Escribe CSS personalizado

- Limita reglas propias del constructor a `.az-section` o a las clases de tipo, como `.az-text` o `.az-button`. `.az-element` no alcanza a Button ni Image.
- No anules las clases de cuadrícula de Bootstrap; el editor fija anchos de columna con ellas.
- Para estilo puntual, añade una clase en el campo **HTML classes**del elemento y da estilo a esa clase.

## Clases solo del editor

Estas clases solo existen mientras el editor funciona, así que las páginas publicadas nunca las cumplen:

| Clase | Dónde |
|---|---|
| `dxpr-builder-ui` | Cada pieza de interfaz del editor: barras de controles, menús, diálogos |
| `controls` | La barra de controles de un elemento |
| `dxpr-editor` | El contenedor de campo en cada modo de vista salvo Preview |
| `az-ctnr` | El contenedor de campo una vez que el editor arrancó |
| `az-sortable-placeholder` | El marcador de destino mientras arrastras un elemento |

Los estilos propios del editor están en `dxpr_builder/css/dxpr_builder_backend.css`, compilados desde `dxpr_builder/sass/dxpr_builder_backend.scss`.

## Versión de Bootstrap

El constructor escribe marcado Bootstrap 5. Si tu tema no carga Bootstrap 5, fija **Sideload Bootstrap files** en **Bootstrap 5** en **DXPR Studio > DXPR Builder > General Settings**, dentro de **Bootstrap**. **None (theme provides Bootstrap)** asume que tu tema lo carga.