Grid

Grid & Layout

Canvas is built on the Bootstrap 5 grid, so all standard .container, .row, and .col-* classes work as expected. On top of that Canvas adds a content and sidebar convention using .postcontent and .sidebar so you can drop a main column and an aside into any content area.

Structure

Every page body sits inside #content > .content-wrap. Inside that you place a Bootstrap .row, then a main column marked .postcontent and an aside marked .sidebar. The column widths are plain Bootstrap .col-lg-* classes.

<section id="content">
    <div class="content-wrap">
        <div class="container">
            <div class="row">

                <!-- Main content -->
                <main class="postcontent col-lg-9">
                    <p>Your primary page content goes here.</p>
                </main>

                <!-- Sidebar -->
                <aside class="sidebar col-lg-3">
                    <div class="sidebar-widgets-wrap">
                        <!-- widgets -->
                    </div>
                </aside>

            </div>
        </div>
    </div>
</section>

Sidebar positions

Because the columns are ordinary Bootstrap columns, sidebar placement is controlled by column order and Bootstrap ordering utilities.

Right sidebar (content first, then sidebar):

<div class="row">
    <main class="postcontent col-lg-9">...</main>
    <aside class="sidebar col-lg-3">...</aside>
</div>

Left sidebar. Keep the sidebar markup after the content for source order, then pull it first visually with .order-lg-first:

<div class="row">
    <main class="postcontent col-lg-9">...</main>
    <aside class="sidebar sticky-sidebar-wrap col-lg-3 order-lg-first">...</aside>
</div>

Standard Bootstrap grid

For plain multi column sections use the Bootstrap grid directly. Canvas ships gutter helpers such as .col-mb-50 for consistent bottom spacing on wrapping columns.

<div class="row col-mb-50">
    <div class="col-lg-4">Column one</div>
    <div class="col-lg-4">Column two</div>
    <div class="col-lg-4">Column three</div>
</div>

Full width sections can use .container-fluid with padding utilities:

<div class="container-fluid px-4 px-xl-5">
    <div class="row">
        ...
    </div>
</div>

Options

.postcontent: marks the main content column so related plugins target it correctly.
.sidebar: marks the aside column and enables sidebar widget styling.
.sidebar-widgets-wrap: wraps a stack of .widget blocks inside the sidebar.
.order-lg-first: Bootstrap ordering utility to move the sidebar to the left visually while keeping content first in the source.
.content-wrap: standard vertical padding wrapper inside #content.

Tips

Keep primary content before the sidebar in the source order for accessibility and SEO, then reorder visually with Bootstrap .order-* utilities.
Pair .sidebar with .sticky-sidebar-wrap when you want the sidebar to stick while scrolling long content.
Use .col-mb-50 (or col-mb-30) on a .row to add uniform bottom margins to columns that wrap on smaller screens.
Column widths are pure Bootstrap, so combine breakpoints like col-lg-9 col-md-8 to tune the split per screen size.

Extras

Inside a Container

To constrain content to Canvas' standard centered width, wrap it in a Bootstrap .container. Use .container-fluid for full width with gutters.

<section class="section">
    <div class="container">
        <h2>Centered Content</h2>
        <p>This block is limited to the responsive container width.</p>
    </div>
</section>

Full-width variant with padding:

<div class="container-fluid px-4 px-xl-5">
    <!-- spans the viewport with side padding -->
</div>

Notes:

.container follows Bootstrap 5 responsive max-widths.
.section adds Canvas' vertical spacing/background; put the .container inside it.

Inside Custom Width DIV

When you need a width that is not a standard container, use a plain wrapper with utility classes or an inline max-width.

<div class="mx-auto" style="max-width: 720px;">
    <h3>Narrow Reading Column</h3>
    <p>Centered block at a custom width.</p>
</div>

Using Bootstrap grid to size a column precisely:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- 8/12 width, centered -->
        </div>
    </div>
</div>

Notes:

mx-auto centers a fixed-width block.
Prefer grid columns (col-*) for responsive proportional widths; use inline max-width only for one-off cases.

Was this page helpful?