Bootstrap CSS Classes

How to use Bootstrap utility classes in the portal editor to customise spacing, colours, layout and responsiveness.

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

{property}{side}-{breakpoint}-{size}

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:

d-none d-lg-block     → visible only on large screens and up
d-block d-md-none     → visible only below medium
d-none d-sm-block d-xl-none → visible between small and large

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:

mt-4 mb-2 text-center bg-light rounded-3 shadow-sm p-4

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.