DocumentationBuilding

Creating layouts

Layouts use Bootstrap’s grid, nested the same way in the editor as in code: Section → Container → Row → Column.

The layout blocks

• Section — a full-width band. Set a background colour, image, gradient or tint.
• Container — centres content at the Bootstrap container widths set in Theme Options.
• Row — holds columns and sets the gutter (the gap between columns) and vertical alignment.
• Column — sets its width out of 12 at each breakpoint, or auto.
• Div — a wrapper for grouping content, with padding, background, border, radius and flex options.
• Responsive Spacer — vertical space that can change size at each breakpoint.

Build a two-column section

1. Add a Section block, then a Container inside it.
2. Add a Row inside the container and give it two Columns.
3. Select each column and set its width to 12 (full width on mobile) and 6 from the lg breakpoint.
4. Add a Responsive Spacer above and below the container to control the section’s top and bottom padding.
5. Add your content blocks inside the columns.

The result is standard Bootstrap markup:

<section class="section">
  <div class="container">
    <div class="row gx-4">
      <div class="col-12 col-lg-6">…</div>
      <div class="col-12 col-lg-6">…</div>
    </div>
  </div>
</section>

Breakpoints

Zen Builder uses the Bootstrap 5 breakpoints: sm 576px, md 768px, lg 992px, xl 1200px and xxl 1400px. A setting applies from its breakpoint upward, so start with the mobile layout and add columns at larger sizes.

Next steps

• Blocks
• Bootstrap configuration