Content Sections

Sections

The .section shortcode is Canvas's full-width content band. It applies vertical padding, a light background, and top and bottom borders by default, giving you a clean horizontal strip to separate page areas. Combine it with utility classes and parallax to build rich, layered layouts.

Basic Section

<div class="section">
    <div class="container">
        <h2>Section Title</h2>
        <p>Section content goes here.</p>
    </div>
</div>

Removing Default Spacing and Borders

Sections come with margin, padding, and borders. Strip them with utilities:

<div class="section border-top-0 m-0">
    <div class="container">
        <p>No top border, no margin.</p>
    </div>
</div>

Common modifiers seen across the demos:

m-0 removes the default margin.
border-top-0 / border-0 removes borders.
bg-transparent removes the default background fill.
dark switches the section to the dark colour scheme for light text.
bg-color applies the theme colour as the background.

Parallax Section

Add parallax and a .parallax-bg image for a fixed-feel background that scrolls at a different rate. Add scroll-detect to expose scroll progress custom properties.

<div class="section parallax scroll-detect m-0 border-top-0 py-5">
    <img src="images/parallax/3.jpg" class="parallax-bg">
    <div class="container-fluid text-center">
        <h2 class="display-4">Parallax Heading</h2>
    </div>
</div>

Scroll-Reactive Content

With scroll-detect on the section, Canvas exposes --cnvs-scroll-percent and --cnvs-scroll-end custom properties you can drive transforms and opacity with:

<div class="section m-0 dark vh-75 vh-lg-100 scroll-detect">
    <div class="vertical-middle">
        <div class="container text-center"
             style="transform: translate3d(0px, calc(1px * var(--cnvs-scroll-percent)), 0px);
                    opacity: calc(1 - var(--cnvs-scroll-end));">
            <h2>Fades as you scroll</h2>
        </div>
    </div>
</div>

Height Utilities

Control section height with fixed values or viewport-based utilities:

<div class="section dark m-0 border-0" style="height: 550px;">
    <div class="container-fluid vertical-middle text-center">
        <i class="i-plain i-large bi-camera-video mx-auto" data-animate="fadeInDown"></i>
    </div>
</div>

Viewport utilities like vh-75, vh-lg-100, min-vh-75 set the section height relative to the viewport, with breakpoint variants.

Tips

Use .vertical-middle inside a fixed-height section to centre content vertically.
Pair parallax with scroll-detect for the smoothest scroll-linked motion.
Keep one background treatment per section (colour, image, or transparent) so the strips read as distinct bands.

Usage

<div class="section">
	<div class="container">

		...

	</div>
</div>

Extras

You can make an individual section dark on an otherwise light page by adding dark to that section only. Canvas applies data-bs-theme="dark" to any .dark element, so nested Bootstrap components adapt.

<section class="section dark my-0">
    <div class="container">
        <h2>Dark Section</h2>
        <p>Text and components here render in dark styling.</p>
    </div>
</section>

Notes:

The dark class scopes the dark styling to that block; the rest of the page stays light.
Inside a globally dark page, use not-dark on a section to force it back to light.

Was this page helpful?