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
Select the element.
Open More > Settings.
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:
<!-- 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.