Layout
Section
The full-width band that holds rows and columns.
Live demo
See it in action
Surface band
A full-width band with a light background.
A Section holds rows and columns, with its own background, padding and full-width bleed.
Dark band
Switch the band colour per section.
Alternate light / dark / tinted backgrounds to build rhythm down the page.
Columns inside
Sections hold any column layout.
Here a 1/2 + 1/2 split inside one band.
Each section is a band; the columns inside carry the content. Set padding, gap and a background per section.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<p class="heading-overline heading-overline--kicker text-center">Surface band</p>
<h2 class="heading-title text-center">A full-width band with a light background.</h2>
<p class="heading-subtitle text-center">A Section holds rows and columns, with its own background, padding and full-width bleed.</p>
</div>
</div>
</div>
</section>To learn more about the Section shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.