Referencia de clases CSS.

Aprende DXPR BuilderReferenciaElementos y CSS

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

Selecciona el elemento.
Abre Más > Ajustes.
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-<type>` en su lugar
`.az-<type>`	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:

<!-- Visible solo en móvil -->
<div class="d-block d-md-none">Contenido móvil</div>

<!-- Visible solo en escritorio -->
<div class="d-none d-md-block">Contenido de escritorio</div>

Añade estas clases en el campo Clases HTML del elemento (en la sección General de los ajustes) para controlar la visibilidad adaptable.