--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/referencia/clases-css' title: 'Referencia de clases CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:59:42+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- El contenido de DXPR Builder usa clases de Bootstrap 5 junto a algunas propias. Esta referencia lista las que es más probable que uses o que apuntes en CSS. 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-24T00:59:42+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Referencia de clases CSS' description: |- El contenido de DXPR Builder usa clases de Bootstrap 5 junto a algunas propias. Esta referencia lista las que es más probable que uses o que apuntes en CSS. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:59:42+0000' dateModified: '2026-10-24T00:59:42+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/documentacion/aprender-dxpr-builder/referencia/clases-css' articleSection: 'Elementos y CSS' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/referencia/clases-css' description: |- El contenido de DXPR Builder usa clases de Bootstrap 5 junto a algunas propias. Esta referencia lista las que es más probable que uses o que apuntes en CSS. 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 --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Referencia](/es/hc/documentation/learn-dxpr-builder/reference) /[Elementos y CSS](/es/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Referencia de clases CSS. Aprende DXPR BuilderReferenciaElementos y CSS ## En esta guía El contenido de DXPR Builder usa clases de Bootstrap 5 junto a algunas propias. Esta referencia lista las que es más probable que uses o que apuntes en CSS. ## Añade clases personalizadas 1. Selecciona el elemento. 2. Abre **Más > Ajustes**. 3. En la sección **General**, elige clases en el campo **Clases HTML**. Para escribir cualquier nombre de clase, haz clic en **Editar como texto** y separa las clases con espacios. ## Clases de cuadrícula de Bootstrap ### Clases de contenedor | Clase | Descripción | |---|---| | `.container` | Contenedor centrado de ancho fijo | | `.container-fluid` | Contenedor de ancho completo | ### Clases de fila y columna | Clase | Descripción | |---|---| | `.row` | Contenedor flexible para columnas | | `.col-{n}` | Columna que cubre n/12 de la fila | | `.col-sm-{n}` | Ancho de columna en pequeño (576px y más) | | `.col-md-{n}` | Ancho de columna en mediano (768px y más) | | `.col-lg-{n}` | Ancho de columna en grande (992px y más) | | `.col-xl-{n}` | Ancho de columna en XL (1200px y más) | ## Utilidades de espaciado de Bootstrap ### Margen | Clase | Descripción | |---|---| | `.m-{0-5}` | Margen en todos los lados | | `.mt-{0-5}` | Margen superior | | `.mb-{0-5}` | Margen inferior | | `.ms-{0-5}` | Margen inicial (izquierda en LTR) | | `.me-{0-5}` | Margen final (derecha en LTR) | | `.mx-{0-5}` | Margen a izquierda y derecha | | `.my-{0-5}` | Margen arriba y abajo | ### Relleno | Clase | Descripción | |---|---| | `.p-{0-5}` | Relleno en todos los lados | | `.pt-{0-5}` | Relleno superior | | `.pb-{0-5}` | Relleno inferior | | `.ps-{0-5}` | Relleno inicial | | `.pe-{0-5}` | Relleno final | | `.px-{0-5}` | Relleno a izquierda y derecha | | `.py-{0-5}` | Relleno arriba y abajo | ## Utilidades de texto de Bootstrap | Clase | Descripción | |---|---| | `.text-start` | Texto alineado a la izquierda | | `.text-center` | Texto centrado | | `.text-end` | Texto alineado a la derecha | | `.fw-bold` | Texto en negrita | | `.fw-light` | Texto de peso ligero | | `.fst-italic` | Texto en cursiva | | `.text-uppercase` | Texto en mayúsculas | | `.text-lowercase` | Texto en minúsculas | | `.fs-1` a `.fs-6` | Tamaño de fuente (1 el mayor) | ## Utilidades de color de Bootstrap ### Colores de texto | Clase | Descripción | |---|---| | `.text-primary` | Color primario del tema | | `.text-secondary` | Color secundario del tema | | `.text-success` | Verde (éxito) | | `.text-danger` | Rojo (peligro/error) | | `.text-warning` | Amarillo (aviso) | | `.text-info` | Cian (información) | | `.text-muted` | Texto gris apagado | | `.text-white` | Texto blanco | ### Colores de fondo | Clase | Descripción | |---|---| | `.bg-primary` | Fondo primario | | `.bg-secondary` | Fondo secundario | | `.bg-success` | Fondo verde | | `.bg-danger` | Fondo rojo | | `.bg-warning` | Fondo amarillo | | `.bg-info` | Fondo cian | | `.bg-light` | Fondo gris claro | | `.bg-dark` | Fondo oscuro | ## Utilidades de visualización de Bootstrap | Clase | Descripción | |---|---| | `.d-none` | Esconde el elemento | | `.d-block` | Visualización en bloque | | `.d-inline` | Visualización en línea | | `.d-sm-none` | Esconde en pequeño y más | | `.d-md-block` | Muestra en mediano y más | | `.d-lg-none` | Esconde en grande y más | ## Clases de DXPR Builder ### Clases de elemento | Clase | Descripción | |---|---| | `.az-element` | Clase base en la mayoría de elementos de contenido; Botón e Imagen no la llevan, así que apunta a `.az-` en su lugar | | `.az-` | Una clase por tipo de elemento, como `.az-text`, `.az-image` o `.az-images-carousel`; Enlaces sociales usa `.st-social` | | `.az-section` | Elemento de sección | | `.row` | Elemento de fila (Bootstrap); el contenido de versiones antiguas también puede tener `.az-row` | | `.col-*` | Elemento de columna (Bootstrap); el contenido de versiones antiguas también puede tener `.az-column` | ### Clases de animación Las animaciones usan los nombres de animate.css. Mientras un elemento se anima tiene: | Clase | Descripción | |---|---| | `.animated` | Se añade mientras dura la animación | | `.infinite` | Se añade cuando **Infinito** está activado | | Nombre de animación, como `.fadeIn` | El efecto de **entrada de animación** o **salida de animación** que se reproduce | ### Clases de variante | Clase | Descripción | |---|---| | `.az-variant-container` | Contenedor de prueba A/B, junto con `.rl-experiment` | | `.az-variant-wrapper` | Cada rama de variante | | `.az-variant-original` | La rama original (A) | | `.az-variant-1`, `.az-variant-2` | Ramas B, C, etc. | | `.az-variant-active` | La rama que se muestra ahora | ## Usa clases para la visibilidad adaptable Combina utilidades de visualización de Bootstrap para mostrar o esconder contenido en tamaños de pantalla concretos: ```html
Contenido móvil
Contenido de escritorio
``` Añade estas clases en el campo **Clases HTML** del elemento (en la sección **General** de los ajustes) para controlar la visibilidad adaptable.