---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/classes-css'
title: 'Referência de classes CSS | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:03:14+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'O conteúdo do DXPR Builder usa classes de Bootstrap 5 juntamente com algumas classes próprias. Esta referência lista as que é mais provável usar ou visar em 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-24T09:03:14+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Referência de classes CSS'
      description: 'O conteúdo do DXPR Builder usa classes de Bootstrap 5 juntamente com algumas classes próprias. Esta referência lista as que é mais provável usar ou visar em CSS.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:03:14+0000'
      dateModified: '2026-10-24T09:03:14+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/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/classes-css'
      articleSection: 'Elementos e CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/classes-css'
      description: 'O conteúdo do DXPR Builder usa classes de Bootstrap 5 juntamente com algumas classes próprias. Esta referência lista as que é mais provável usar ou visar em CSS.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Referência](/pt-pt/hc/documentation/learn-dxpr-builder/reference) /[Elementos e CSS](/pt-pt/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Referência de classes CSS.

 Aprender DXPR BuilderReferênciaElementos e CSS

   ## Neste guia

O conteúdo do DXPR Builder usa classes de Bootstrap 5 juntamente com algumas classes próprias. Esta referência lista as que é mais provável usar ou visar em CSS.

## Adicionar classes personalizadas

1. Selecione o elemento.
2. Abra **More > Settings**.
3. Na secção **General**, escolha classes no campo **HTML classes**. Para escrever qualquer nome de classe, clique em **Edit as text** e separe as classes com espaços.

## Classes de grelha Bootstrap

### Classes de contentor

| Classe | Descrição |
|---|---|
| `.container` | Contentor centrado de largura fixa |
| `.container-fluid` | Contentor de largura total |

### Classes de fila e coluna

| Classe | Descrição |
|---|---|
| `.row` | Contentor flex para colunas |
| `.col-{n}` | Coluna com n/12 da fila |
| `.col-sm-{n}` | Largura de coluna em small (576px+) |
| `.col-md-{n}` | Largura de coluna em medium (768px+) |
| `.col-lg-{n}` | Largura de coluna em large (992px+) |
| `.col-xl-{n}` | Largura de coluna em XL (1200px+) |

## Utilitários de espaçamento Bootstrap

### Margem

| Classe | Descrição |
|---|---|
| `.m-{0-5}` | Margem em todos os lados |
| `.mt-{0-5}` | Margem superior |
| `.mb-{0-5}` | Margem inferior |
| `.ms-{0-5}` | Margem inicial (esquerda em LTR) |
| `.me-{0-5}` | Margem final (direita em LTR) |
| `.mx-{0-5}` | Margem esquerda e direita |
| `.my-{0-5}` | Margem superior e inferior |

### Preenchimento

| Classe | Descrição |
|---|---|
| `.p-{0-5}` | Preenchimento em todos os lados |
| `.pt-{0-5}` | Preenchimento superior |
| `.pb-{0-5}` | Preenchimento inferior |
| `.ps-{0-5}` | Preenchimento inicial |
| `.pe-{0-5}` | Preenchimento final |
| `.px-{0-5}` | Preenchimento esquerdo e direito |
| `.py-{0-5}` | Preenchimento superior e inferior |

## Utilitários de texto Bootstrap

| Classe | Descrição |
|---|---|
| `.text-start` | Texto alinhado à esquerda |
| `.text-center` | Texto alinhado ao centro |
| `.text-end` | Texto alinhado à direita |
| `.fw-bold` | Texto em negrito |
| `.fw-light` | Texto leve |
| `.fst-italic` | Texto em itálico |
| `.text-uppercase` | Texto em maiúsculas |
| `.text-lowercase` | Texto em minúsculas |
| `.fs-1` a `.fs-6` | Tamanho da letra (1 o maior) |

## Utilitários de cor Bootstrap

### Cores de texto

| Classe | Descrição |
|---|---|
| `.text-primary` | Cor primária do tema |
| `.text-secondary` | Cor secundária do tema |
| `.text-success` | Verde (success) |
| `.text-danger` | Vermelho (danger/error) |
| `.text-warning` | Amarelo (warning) |
| `.text-info` | Ciano (information) |
| `.text-muted` | Texto esbatido cinzento |
| `.text-white` | Texto branco |

### Cores de fundo

| Classe | Descrição |
|---|---|
| `.bg-primary` | Fundo primário |
| `.bg-secondary` | Fundo secundário |
| `.bg-success` | Fundo verde |
| `.bg-danger` | Fundo vermelho |
| `.bg-warning` | Fundo amarelo |
| `.bg-info` | Fundo ciano |
| `.bg-light` | Fundo cinzento claro |
| `.bg-dark` | Fundo escuro |

## Utilitários de apresentação Bootstrap

| Classe | Descrição |
|---|---|
| `.d-none` | Esconder o elemento |
| `.d-block` | Apresentação em bloco |
| `.d-inline` | Apresentação em linha |
| `.d-sm-none` | Esconder em small+ |
| `.d-md-block` | Mostrar em medium+ |
| `.d-lg-none` | Esconder em large+ |

## Classes do DXPR Builder

### Classes de elementos

| Classe | Descrição |
|---|---|
| `.az-element` | Classe base na maioria dos elementos de conteúdo; Button and Image não a têm, por isso vise `.az-<type>` em vez disso |
| `.az-<type>` | Uma classe por tipo de elemento, como `.az-text`, `.az-image` ou `.az-images-carousel`; Social Links usa `.st-social` |
| `.az-section` | Elemento Section |
| `.row` | Elemento Row (Bootstrap); conteúdo de versões mais antigas também pode ter `.az-row` |
| `.col-*` | Elemento Column (Bootstrap); conteúdo de versões mais antigas também pode ter `.az-column` |

### Classes de animação

As animações usam a nomenclatura animate.css. Enquanto um elemento anima, tem:

| Classe | Descrição |
|---|---|
| `.animated` | Adicionada enquanto a animação corre |
| `.infinite` | Adicionada quando **Infinite** está ligado |
| Nome da animação, como `.fadeIn` | O efeito **Animation in** ou **Animation out** a ser reproduzido |

### Classes de variantes

| Classe | Descrição |
|---|---|
| `.az-variant-container` | Contentor de teste A/B, juntamente com `.rl-experiment` |
| `.az-variant-wrapper` | Cada braço de variante |
| `.az-variant-original` | O braço original (A) |
| `.az-variant-1`, `.az-variant-2` | Braços B, C e por aí fora |
| `.az-variant-active` | O braço atualmente mostrado |

## Usar classes para visibilidade responsiva

Combine utilitários de apresentação Bootstrap para mostrar ou esconder conteúdo em tamanhos de ecrã específicos:

```html
<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

```

Adicione estas classes no campo **HTML classes** do elemento (na secção **General** das definições) para controlar a visibilidade responsiva.