Bootstrap 5Layout

Bootstrap 5 Sticky Sidebar

A sticky sidebar is a layout pattern where a secondary column remains fixed in the viewport as the user scrolls through the main content area. Bootstrap 5 achieves this using the `position-sticky` utility combined with `top-*` offset classes, requiring no JavaScript. Use it when you have supplementary content — such as a table of contents, filters, or author bio — that users benefit from seeing throughout a long page.

Primary Class

.sticky-sidebar

Common Use Cases

→Blog post pages where a table of contents sidebar tracks the reader's position and stays visible as they scroll through 2,000+ word articles
→E-commerce category pages where product filter controls (price range, brand, size) need to remain accessible while the user browses a long product grid
→Documentation sites where a section navigation menu sticks so developers can jump between API reference sections without scrolling back to the top
→Dashboard layouts where a summary widget showing totals or KPIs stays pinned while the user reviews detailed data rows in the main content panel

Variants & Classes

Variant	Description	Classes
Sticky Sidebar Default	Standard sticky sidebar with Bootstrap's default styling.	`sticky-sidebar`
Sticky Sidebar Responsive	Responsive variant that adapts to different screen sizes.	`sticky-sidebar sticky-sidebar-responsive`

Code Example

<div class="container py-5">
  <div class="row">

    <!-- Main Content -->
    <div class="col-lg-8">
      <article>
        <h1 class="mb-3">Understanding Async JavaScript</h1>
        <p>JavaScript's event loop handles asynchronous operations through a call stack and callback queue...</p>
        <h2 class="mt-5">Promises</h2>
        <p>A Promise represents a value that may be available now, in the future, or never...</p>
        <h2 class="mt-5">Async/Await</h2>
        <p>The async/await syntax is syntactic sugar over Promises, making asynchronous code read like synchronous code...</p>
        <h2 class="mt-5">Error Handling</h2>
        <p>Use try/catch blocks inside async functions to handle rejected Promises cleanly...</p>
      </article>
    </div>

    <!-- Sticky Sidebar -->
    <div class="col-lg-4">
      <div class="sticky-top" style="top: 80px;">
        <div class="card border-0 shadow-sm">
          <div class="card-body">
            <h5 class="card-title fw-semibold mb-3">On This Page</h5>
            <nav class="nav flex-column">
              <a class="nav-link px-0 py-1 text-body" href="#promises">Promises</a>
              <a class="nav-link px-0 py-1 text-body" href="#async-await">Async/Await</a>
              <a class="nav-link px-0 py-1 text-body" href="#error-handling">Error Handling</a>
            </nav>
          </div>
        </div>
        <div class="card border-0 shadow-sm mt-3">
          <div class="card-body">
            <h6 class="fw-semibold">Written by</h6>
            <div class="d-flex align-items-center gap-2 mt-2">
              <img src="/assets/avatar-sarah.jpg" class="rounded-circle" width="40" height="40" alt="Sarah Chen">
              <div>
                <p class="mb-0 fw-medium">Sarah Chen</p>
                <small class="text-muted">Senior JS Engineer</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Live Examples

Basic Sticky Sidebar

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated sticky sidebar with custom colours
✓Sticky Sidebar with interactive states
✓Responsive sticky sidebar for all screen sizes

Best Practices

Set a precise top offset to clear fixed navbars

Bootstrap's `sticky-top` class sets `top: 0` by default, which causes the sidebar to slide under a fixed navbar. Override it with an inline style or a custom CSS variable — `style="top: 72px;"` — matching your navbar's exact height so the sticky element stops in the right position.

Constrain sidebar height to prevent overflow on short viewports

If your sidebar content is taller than the viewport, add `max-height: calc(100vh - 80px); overflow-y: auto;` to the sticky container so users can scroll within the sidebar independently without breaking the layout.

Only apply sticky behaviour on large screens

On mobile, a sticky sidebar competes for screen space with the main content. Wrap the `sticky-top` class conditionally using a custom breakpoint class, or apply `position: sticky` only inside a `@media (min-width: 992px)` rule so small-screen users see a normal stacked layout.

Avoid sticky sidebars inside overflow-hidden parents

`position: sticky` silently breaks when any ancestor element has `overflow: hidden` or `overflow: auto` set. If your sidebar refuses to stick, inspect parent elements in DevTools — removing the rogue overflow property almost always fixes it.

FAQ

What is the difference between sticky-top and position-fixed for a sidebar?

`sticky-top` (which applies `position: sticky; top: 0`) keeps the sidebar within the normal document flow — it only sticks while its parent container is still in the viewport. Once you scroll past the parent column, the sidebar stops sticking and moves with it. `position: fixed` removes the element from the document flow entirely and pins it relative to the viewport regardless of scroll position, which requires manual width and offset management and can overlap other content. For sidebars inside a two-column grid, `sticky-top` is almost always the correct choice.

How do I customise the top offset without writing custom CSS classes?

Bootstrap 5.2+ exposes a `--bs-sticky-top` CSS variable approach via its new utility API, but the most practical method is to override the `top` property using Bootstrap's spacing utilities via CSS custom properties or a direct inline style. For example, `<div class="sticky-top" style="top: 64px;">` is straightforward for fixed values. For maintainable projects, define a CSS custom property in your `:root` — `--navbar-height: 64px;` — and reference it as `top: var(--navbar-height)` in a small CSS rule targeting `.sticky-sidebar`.

How does Canvas Builder generate a sticky sidebar layout?

When you describe a two-column layout with a persistent sidebar in Canvas Builder, it generates a complete Bootstrap 5 grid with the correct `col-lg-*` split, applies `sticky-top` with a pre-calculated `top` offset that accounts for any navbar you've included, and wraps sidebar widgets in individual cards using your chosen brand colours for borders and headings. The output is fully responsive — the sticky behaviour is scoped to large screens by default so mobile users get a clean stacked layout.