Utilities

Every component dialog includes a Utilities section. Colour settings are in Appearance. Everything maps to Bootstrap 5.3 classes; the plugin never writes inline styles. With bootstrapui_version: '4' the class names of Bootstrap 4 are written (text-left, ml-3, font-weight-bold, float-right…) and the groups that version 4 does not have are not offered, see Bootstrap 4.

The Custom classes dialog — Custom classes: add any classes to any element when the utilities are not enough.

Group	Classes
Spacing	`m`, `p` with sides and steps 0–5, `auto`, per breakpoint
Sizing	`w-`, `h-`, `mw-100`, `mh-100`, `vw-100`, `vh-100` (no breakpoints; Bootstrap does not provide them for these classes)
Display	`d-*` per breakpoint, `vstack`, `hstack`
Flexbox	direction, `justify-content-`, `align-items-`, `gap-*` per breakpoint
Colours	`text-`, `bg-`, `text-bg-*`, opacities
Borders and corners	`border`, `rounded`, `shadow`, `opacity-`
Font and text	`fs-`, `fw-`, `lh-*`, wrapping, decoration, case, `font-monospace`, link utilities
Position	`position-`, edges, `translate-middle`, `z-`, `overflow-`, `user-select-`, `pe-none`, `stretched-link`
Layout behaviour	`flex-fill/grow/shrink/wrap`, `align-self-`, `align-content-`, `order-`, `object-fit-`

Two rules keep the output clean: one class, one control (a class managed by a utility is not offered again by the dialog), and nothing is written that would have no effect (a border colour without a border, an offset without a position).

On Bootstrap 4 these are not offered: gap-*, opacity-*, z-*, fs-*, lh-*, link utilities, vstack/hstack, object-fit-*, position offsets and translate-middle, pe-none, numbered border widths and rounding, d-grid and the xxl breakpoint.

Classes the plugin does not recognise are kept in Advanced → Custom CSS classes and preserved when you edit.

For quick changes you do not need a dialog: TinyMCE’s Styles drop-down gets a Bootstrap group. Add styles to your toolbar (it is also under Format → Formats), or use the bootstrapuistyles button, which offers the same menu on its own.

The group is divided into Font and text (text colour, font size, weight, italic, monospace, case, decoration, line height, wrapping, alignment), Spacing (outer and inner, per side and breakpoint), Background and border (background colour, border sides, colour and width, corners, shadow, opacity) and Layout (display, width, height).

The class goes on the element under the cursor, or on every selected block. Text properties go to the nearest element with text (a link, <strong>), spacing and borders to the nearest block (the paragraph, not the <strong> inside it).
One value per group: mt-5 replaces mt-3. Choosing the active value (marked with a tick) removes it.
Your own style_formats and TinyMCE’s default formats stay; the Bootstrap group is added at the end.

Turn it off with bootstrapui_styles: false, or narrow it down:

bootstrapui_styles: {
  groups: ['text', 'background', 'margin', 'padding'], // text background font alignment margin padding border effects display sizing
  breakpoints: ['md', 'lg'],                            // [] = no breakpoint level, default = every breakpoint
  title: 'Bootstrap',                                   // name of the group in the Styles menu
},