CSS architecture
Builder content is Bootstrap 5 markup plus a small set of az-
classes. Knowing which classes appear on published pages, and which
only exist while the editor runs, tells you what your theme CSS can
target.
Classes on published pages
Layout
| Markup | Classes |
|---|---|
| Section | az-section, with container or container-fluid inside |
| Row | Bootstrap row |
| Column | Bootstrap col-* classes, one per breakpoint |
| Content element | One class per element type, such as az-text, az-image or az-images-carousel; Social Links uses st-social. Most also carry az-element; Button and Image do not |
Content saved by older versions can still carry az-row and
az-column. The editor recognises them and leaves them out the next
time the row or column is saved.
Modifiers
| Class | Set by |
|---|---|
az-row--equal-height |
Equal-height columns on a row; without it the row gets align-items-start |
az-row--reverse-horizontal |
Mirror row on a row |
az-util-vertical-centering |
Vertical centering on a section or column |
Bootstrap grid
Columns use Bootstrap's grid classes:
| Class | Width |
|---|---|
col |
Shares the row equally |
col-6 |
50% |
col-md-4 |
33% from 768 px |
col-lg-3 |
25% from 992 px |
Writing custom CSS
- Scope builder-specific rules to
.az-sectionor to the type classes, such as.az-textor.az-button..az-elementmisses Button and Image. - Do not override Bootstrap's grid classes; the editor sets column widths through them.
- For one-off styling, add a class in the element's HTML classes field and style that class.
Editor-only classes
These classes exist only while the editor is running, so published pages never match them:
| Class | Where |
|---|---|
dxpr-builder-ui |
Every piece of editor interface: control bars, menus, dialogs |
controls |
The control bar of an element |
dxpr-editor |
The field container in every view mode except Preview |
az-ctnr |
The field container once the editor has started |
az-sortable-placeholder |
The drop placeholder while you drag an element |
The editor's own styles are in dxpr_builder/css/dxpr_builder_backend.css,
built from dxpr_builder/sass/dxpr_builder_backend.scss.
Bootstrap version
The builder writes Bootstrap 5 markup. If your theme does not load Bootstrap 5, set Sideload Bootstrap files to Bootstrap 5 at DXPR Studio > DXPR Builder > General Settings, under Bootstrap. None (theme provides Bootstrap) assumes your theme loads it.