---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/reference/css-classes'
title: 'CSS Class Reference | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: "The builder's own classes and the Bootstrap utilities it relies on"
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'CSS Class Reference'
      description: "The builder's own classes and the Bootstrap utilities it relies on"
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31: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/hc/documentation/learn-dxpr-builder/reference/css-classes'
      articleSection: 'Elements and CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/reference/css-classes'
      description: "The builder's own classes and the Bootstrap utilities it relies on"
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Reference](/hc/documentation/learn-dxpr-builder/reference) /[Elements and CSS](/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # CSS Class Reference.

The builder's own classes and the Bootstrap utilities it relies on

 Learn DXPR BuilderReferenceElements and CSS

   ## In this guide

DXPR Builder content uses Bootstrap 5 classes alongside a few classes of its own. This reference lists the ones you are most likely to use or target in CSS.

## Adding custom classes

1. Select the element.
2. Open **More > Settings**.
3. In the **General** section, pick classes in the **HTML classes**field. To type any class name, click **Edit as text** and separate classes with spaces.

## Bootstrap Grid Classes

### Container Classes

| Class | Description |
|---|---|
| `.container` | Fixed-width centred container |
| `.container-fluid` | Full-width container |

### Row and Column Classes

| Class | Description |
|---|---|
| `.row` | Flex container for columns |
| `.col-{n}` | Column spanning n/12 of row |
| `.col-sm-{n}` | Column width at small (576px+) |
| `.col-md-{n}` | Column width at medium (768px+) |
| `.col-lg-{n}` | Column width at large (992px+) |
| `.col-xl-{n}` | Column width at XL (1200px+) |

## Bootstrap Spacing Utilities

### Margin

| Class | Description |
|---|---|
| `.m-{0-5}` | Margin on all sides |
| `.mt-{0-5}` | Margin top |
| `.mb-{0-5}` | Margin bottom |
| `.ms-{0-5}` | Margin start (left in LTR) |
| `.me-{0-5}` | Margin end (right in LTR) |
| `.mx-{0-5}` | Margin left and right |
| `.my-{0-5}` | Margin top and bottom |

### Padding

| Class | Description |
|---|---|
| `.p-{0-5}` | Padding on all sides |
| `.pt-{0-5}` | Padding top |
| `.pb-{0-5}` | Padding bottom |
| `.ps-{0-5}` | Padding start |
| `.pe-{0-5}` | Padding end |
| `.px-{0-5}` | Padding left and right |
| `.py-{0-5}` | Padding top and bottom |

## Bootstrap Text Utilities

| Class | Description |
|---|---|
| `.text-start` | Left-aligned text |
| `.text-center` | Centre-aligned text |
| `.text-end` | Right-aligned text |
| `.fw-bold` | Bold text |
| `.fw-light` | Light weight text |
| `.fst-italic` | Italic text |
| `.text-uppercase` | Uppercase text |
| `.text-lowercase` | Lowercase text |
| `.fs-1` to `.fs-6` | Font size (1 largest) |

## Bootstrap Colour Utilities

### Text Colours

| Class | Description |
|---|---|
| `.text-primary` | Theme primary colour |
| `.text-secondary` | Theme secondary colour |
| `.text-success` | Green (success) |
| `.text-danger` | Red (danger/error) |
| `.text-warning` | Yellow (warning) |
| `.text-info` | Cyan (information) |
| `.text-muted` | Grey muted text |
| `.text-white` | White text |

### Background Colours

| Class | Description |
|---|---|
| `.bg-primary` | Primary background |
| `.bg-secondary` | Secondary background |
| `.bg-success` | Green background |
| `.bg-danger` | Red background |
| `.bg-warning` | Yellow background |
| `.bg-info` | Cyan background |
| `.bg-light` | Light grey background |
| `.bg-dark` | Dark background |

## Bootstrap Display Utilities

| Class | Description |
|---|---|
| `.d-none` | Hide element |
| `.d-block` | Block display |
| `.d-inline` | Inline display |
| `.d-sm-none` | Hide at small+ |
| `.d-md-block` | Show at medium+ |
| `.d-lg-none` | Hide at large+ |

## DXPR Builder classes

### Element classes

| Class | Description |
|---|---|
| `.az-element` | Base class on most content elements; Button and Image do not carry it, so target `.az-<type>` instead |
| `.az-<type>` | One class per element type, such as `.az-text`, `.az-image` or `.az-images-carousel`; Social Links uses `.st-social` |
| `.az-section` | Section element |
| `.row` | Row element (Bootstrap); content from older versions may also have `.az-row` |
| `.col-*` | Column element (Bootstrap); content from older versions may also have `.az-column` |

### Animation classes

Animations use the animate.css naming. While an element animates it has:

| Class | Description |
|---|---|
| `.animated` | Added while the animation runs |
| `.infinite` | Added when **Infinite** is on |
| Animation name, such as `.fadeIn` | The **Animation in** or **Animation out** effect being played |

### Variant classes

| Class | Description |
|---|---|
| `.az-variant-container` | A/B test container, together with `.rl-experiment` |
| `.az-variant-wrapper` | Each variant arm |
| `.az-variant-original` | The original arm (A) |
| `.az-variant-1`, `.az-variant-2` | Arms B, C and so on |
| `.az-variant-active` | The arm currently shown |

## Using Classes for Responsive Visibility

Combine Bootstrap display utilities to show or hide content at specific screen sizes:

```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>

```

Add these classes in the element's **HTML classes**field (in the **General** section of the settings) to control responsive visibility.