DocumentationStyling

Bootstrap configuration

Zen Builder compiles Bootstrap 5 from SCSS using your Theme Options, so colours, type, spacing and grid values all come from one screen.

How it works

1. Each Theme Options field maps to a Bootstrap SCSS variable, for example the primary colour to $primary.
2. When you save, Zen Builder compiles Bootstrap into options-generated-bootstrap-stylesheet.css in the child theme folder.
3. That stylesheet loads on the front end and in the block editor, so pages look the same in both.

Utility classes

All Bootstrap utilities are available. Add them to any block under Advanced → Additional CSS class(es):

• Spacing: mt-4, pb-lg-5, gap-3
• Display: d-none, d-md-block, d-flex
• Flex: align-items-center, justify-content-between
• Text: text-center, text-muted, fw-semibold
• Colour: bg-light, text-primary

Extending Bootstrap

Add your own rules to the child theme’s style.css. Use Bootstrap’s CSS variables so your styles follow Theme Options:

.my-callout {
  border-left: 3px solid var(--bs-primary);
  border-radius: var(--bs-border-radius);
}

Next steps

• Theme settings
• Creating layouts