CSS Class Reference.

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

Learn DXPR BuilderReferenceElements and CSS

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.