Section
The top-level band of content — a Section wraps rows, holds your columns, and carries the background, height and spacing for a strip of the page. Its options live across the Layout, Styling, Animations, and Advanced tabs.
Section is now part of the Classic palette tab. New layouts are best started with the modern Div — a Section, Flexbox (div) or Grid (div) that outputs clean, semantic HTML. This Bootstrap Section stays fully supported for existing pages and anyone who prefers the classic grid.
Each setting is routed to the leanest layer that fits it — never a raw inline style unless the value is genuinely per-instance. The four output mechanisms used below:
- Predefined utility class — a fixed-enum option (a small, unchanging set of values) toggles a class defined once in a static stylesheet. Reusable, cacheable, zero per-instance CSS.
- Per-page dynamic file — an arbitrary or user-library value (a Custom height, a named Container Width) is written as a
.u{hash}-scoped rule into that page's generated stylesheet (…/uploads/unysonplus/css/page-{id}.css, aggregated bydynamic-css.php). Still fully editable from the option; just not inline. - Inline
style=— reserved for the Background layers, because every section has a unique image/gradient/overlay. - Injected markup — patterns and shape dividers render their own elements.
The Animations and Advanced tabs are the shared, cross-shortcode controls and are omitted below. Hover any cell for more detail.
Browsers and screen readers understand a page through landmark elements — <header>, <nav>, <main> (exactly one), <footer> — plus <section>s that each begin with a heading. Reaching for these instead of nothing-but-<div> lets people jump straight to the main content and gives search engines the structure too. MDN: the section element
Layout
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Section Variant | variant | Section-style select | Default | No | <section class="section--alt"> | presets-{hash}.css |
| Full Width | is_fullwidth | Switch | No | No | <div class="fw-container-fluid"> | Grid CSS |
| Container Width preset | container_width | Multi-picker | Inherit | No | <section class="section--cw-narrow"> | presets-{hash}.css |
| Container Width Custom | container_width | Multi-picker → unit-input | Inherit | No | .u8f2a1c .fw-container{max-width:calc(1180px + 2×gutter)} | page-{id}.css |
| Min Height preset | min_height | Multi-picker | Auto | No | <section class="section--minh-80"> | Section styles.css |
| Min Height Custom | min_height | Multi-picker → unit-input | Auto (600px) | No | .u8f2a1c{min-height:600px} | page-{id}.css |
| Columns Horizontal Alignment | column_halign | Responsive image-picker | Default (left) | Yes | <section class="section--cols-center section--cols-lg-between"> | Section styles.css |
| Columns Vertical Alignment | column_valign | Image-picker | Stretch | No | <section class="section--valign-stretch"> | Section styles.css |
| Column Order reverse | reverse_columns | Responsive switch | No | Yes | <section class="section--rev section--rev-lg-off"> | Section styles.css |
- Section Variant — named visual preset for the band: Default, Alt (subtle off-white, for an alternating banded rhythm down the page), Light (force a light background + dark text), or Dark (force a dark background + light text). Pairs with Background on the Styling tab.
- Full Width — switch. On, the background spans edge-to-edge while the content stays in the container; off, the whole section is constrained to the container width.
- Container Width — constrain this section's content band to a narrower width than the site-wide Container Width: a named preset from the Container Widths library (Theme Settings → Components → Section Styles → Container Widths) or Custom (a unit-input). Inherit uses the global width.
- Min Height — minimum section height: Auto (fit content), 40% / 60% / 80% of viewport, Full viewport (100vh), or Custom…. Choosing Custom reveals a Custom Height unit-input (px, %, vh, vw, rem, em — default
600px). The viewport presets are predefined utility classes (.section--minh-80, etc.); only Custom emits a per-instance rule. Use a viewport preset with centered columns for a hero. - Columns Horizontal Alignment — align the section's columns within the row: Left / Default, Center, Right, Between, Around, or Evenly. Most visible when the columns don't already fill the row width. Per-breakpoint (base / tablet / desktop).
- Columns Vertical Alignment — where the content sits vertically when the section is taller than its content (most visible with a Min Height): Top / Default, Center, Bottom, or Stretch (columns grow to fill the height).
- Column Order — reverse the column order (e.g. swap an image/text pair), with independent per-breakpoint on/off overrides for tablet and desktop.
Styling
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Text Alignment | text_align | Alignment buttons | Inherit | No | <section class="text-center"> | frontend-grid.css |
| Background color / gradient / image / overlay | background | background-pro | None | No | <section style="background-color:#1a1a1a;background-image:linear-gradient(rgba(0,0,0,.45),…), url(…), linear-gradient(135deg,…);background-size:cover"> | Inline style |
| Background video | background | background-pro (video) | None | No | <section class="background-video"> | background.css + styles.css |
| Background Pattern | background_pattern | Multi-picker | None | No | <div class="pattern-layer"> | Pattern-library CSS |
| Top / Bottom Shape Divider | divider_top / divider_bottom | Multi-picker | None | No | <div class="sc-shape-divider sc-shape-divider--top"> | Section styles.css + inline |
| Top / Bottom Spacing | padding_top / padding_bottom | Spacing field | None | Yes | <section class="pt-4 pb-lg-6"> | presets-{hash}.css / page-{id}.css |
| Gap / Gap X / Gap Y | gap / gap_x / gap_y | Responsive short-select | Use Default Gap | Yes | <section class="section--gap-lg section--gap-x-md"> | presets-{hash}.css |
- Text Alignment — sets the CSS
text-alignfor all content in this section — headings, paragraphs and buttons inherit it together. Inherit forces nothing. - Background — a
background-procontrol with stacking color, gradient, image and video layers (overlay over image over gradient over color). Image attachment Fixed gives a parallax effect; video renders muted and looping with an optional poster/fallback. - Background Pattern — an optional decorative pattern layer painted behind the content (from the Background Patterns library).
- Top / Bottom Shape Divider — an SVG-shaped edge (tilt / curve / wave / triangle) at the section's top and/or bottom, each with its own color, height and horizontal flip.
- Top Spacing / Bottom Spacing — vertical breathing room above / below the section content.
- Gap — overrides the site-wide Default Gap for every Bootstrap row inside this section, setting both horizontal and vertical column gap. Default is Use Default Gap.
- Gap X (override) / Gap Y (override) — override Gap on just the horizontal / vertical axis. Each inherits from Gap unless set.
Min Height and Vertical Alignment are fixed enums — a small, unchanging set of values — so each is a reusable predefined class in the section stylesheet. Container Width draws from a user-extensible named-width library: each named width is generated once as a reusable .section--cw-{slug} class in presets-{hash}.css (exactly like Gap and Section Variant), so a width reused across many sections is defined a single time and cached site-wide. Only a one-off Custom width — which has no shared class — is written per-section into that page's page-{id}.css. Either way the value stays fully editable from the option; the difference is only where the CSS is written, never inline on the element.
Animations
Standard entrance-animation controls (Effect, Duration, Delay, Offset), shared across all elements — see Common controls → Animations.
Advanced
Shared per-element controls — Custom CSS Class / ID, Custom CSS, responsive visibility, custom attributes, Position / Z-Index, and Margin & Padding. See Common controls → Advanced.