Every editor component exposes an Advanced section with a className (or classNames) field. This field accepts any valid Bootstrap 5 utility class, giving you fine-grained control over appearance without custom CSS.
Spacing utilities
The most commonly used utilities control margin and padding.
Syntax
| Token | Values | Meaning |
|---|
property | m or p | Margin or padding |
side | t, b, s, e, x, y, or blank | Top, bottom, start (left), end (right), horizontal, vertical, or all sides |
breakpoint | sm, md, lg, xl, xxl | Optional — applies from this breakpoint up |
size | 0–5, auto | 0 = none, 1 = 0.25 rem, 2 = 0.5 rem, 3 = 1 rem, 4 = 1.5 rem, 5 = 3 rem |
Examples
| Class | Effect |
|---|
mt-3 | Top margin of 1 rem |
mb-5 | Bottom margin of 3 rem |
p-4 | 1.5 rem padding on all sides |
px-3 py-5 | 1 rem horizontal + 3 rem vertical padding |
ms-auto | Push element to the right |
mx-auto | Centre horizontally |
pt-md-4 | 1.5 rem top padding from medium breakpoint up |
Text utilities
| Class | Effect |
|---|
text-start | Left-align text |
text-center | Centre-align text |
text-end | Right-align text |
text-white | White text |
text-muted | Muted (grey) text |
text-primary | Primary colour text |
fw-bold | Bold font weight |
fs-1 through fs-6 | Font sizes matching <h1> through <h6> |
text-uppercase | Uppercase text |
text-truncate | Ellipsis-truncate overflowing text |
Background colours
| Class | Effect |
|---|
bg-primary | Primary brand colour |
bg-secondary | Secondary colour |
bg-success | Green success |
bg-danger | Red danger |
bg-warning | Yellow warning |
bg-info | Cyan info |
bg-light | Light grey |
bg-dark | Dark/black |
bg-white | White |
bg-transparent | Transparent |
Borders
| Class | Effect |
|---|
border | Default border on all sides |
border-0 | Remove all borders |
border-top | Border on top only |
rounded | Rounded corners |
rounded-3 | Medium radius |
rounded-circle | Full circle crop |
rounded-pill | Pill shape |
border-primary | Primary colour border |
border-2 | 2 px border width |
Display and visibility
| Class | Effect |
|---|
d-none | Hide element |
d-block | Show as block |
d-flex | Flexbox container |
d-inline-flex | Inline flexbox |
d-none d-md-block | Hidden below medium, visible from medium up |
d-md-none | Hidden from medium up |
Responsive visibility pattern
Combine d-none with a breakpoint display class to show content only at certain screen sizes:
Flexbox utilities
| Class | Effect |
|---|
d-flex | Enable flexbox |
flex-row | Horizontal direction |
flex-column | Vertical direction |
justify-content-center | Centre items horizontally |
justify-content-between | Space items evenly |
align-items-center | Centre items vertically |
gap-2 | Gap of 0.5 rem between flex items |
gap-3 | Gap of 1 rem |
flex-wrap | Allow wrapping to next line |
Sizing
| Class | Effect |
|---|
w-25, w-50, w-75, w-100 | Width as percentage |
h-100 | Full height |
mw-100 | Max width 100% |
min-vh-100 | Minimum height of full viewport |
Shadows
| Class | Effect |
|---|
shadow-none | No shadow |
shadow-sm | Small shadow |
shadow | Medium shadow |
shadow-lg | Large shadow |
Combining classes
The className field accepts multiple classes separated by spaces. Combine them freely:
This gives a 1.5 rem top margin, 0.5 rem bottom margin, centred text, light background, rounded corners, a small shadow, and 1.5 rem padding.
Responsive prefixes work on most utilities. For example, text-center text-md-start centres text on mobile but left-aligns it from medium
breakpoint up.
