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. It is achieved in Bootstrap 5 using the `position-sticky` utility combined with a `top-*` offset class inside a multi-column grid. Use it when the sidebar contains navigation, filters, or calls-to-action that should stay accessible regardless of scroll position.

Primary Class

.sticky-sidebar

Common Use Cases

→E-commerce product listing pages where category filters and price range sliders must remain visible while the user browses dozens of products
→Long-form documentation or tutorial pages where a table of contents sidebar tracks section headings and lets readers jump directly to any heading
→Blog article pages where an author bio card, related posts list, or newsletter sign-up form stays anchored beside the article body
→SaaS dashboard detail views where a summary card showing key metrics or action buttons remains visible while the user scrolls through a detailed data table

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 g-4">

    <!-- Main Content -->
    <div class="col-lg-8">
      <article>
        <h1 class="mb-3">Complete Guide to Cold Brew Coffee</h1>
        <p class="lead">Cold brew is made by steeping coarse coffee grounds in cold or room-temperature water for 12–24 hours, producing a smooth, low-acid concentrate.</p>

        <h2 class="mt-4">Equipment You Need</h2>
        <p>You need a large jar or pitcher, a fine-mesh strainer, cheesecloth, and coarsely ground coffee at a 1:4 coffee-to-water ratio by weight. A kitchen scale gives consistent results every time.</p>

        <h2 class="mt-4">The Steeping Process</h2>
        <p>Combine grounds and cold filtered water in your container. Cover and refrigerate for 18 hours. Longer steeping at room temperature speeds extraction but risks over-extraction and bitterness past 20 hours.</p>

        <h2 class="mt-4">Filtering & Storage</h2>
        <p>Pour the concentrate through cheesecloth-lined strainer twice for a clean cup. Store concentrate in a sealed glass jar in the refrigerator for up to two weeks. Dilute 1:1 with water or milk before serving.</p>

        <h2 class="mt-4">Serving Suggestions</h2>
        <p>Serve over ice with oat milk for a classic cold brew latte. Add a pinch of salt to the grounds before steeping to reduce perceived bitterness without sweeteners.</p>
      </article>
    </div>

    <!-- Sticky Sidebar -->
    <div class="col-lg-4">
      <div class="position-sticky top-0 pt-4">

        <!-- Table of Contents -->
        <div class="card border-0 shadow-sm mb-4">
          <div class="card-body">
            <h5 class="card-title fw-semibold mb-3">In This Guide</h5>
            <nav class="nav flex-column gap-1">
              <a class="nav-link px-0 py-1 text-body" href="#">Equipment You Need</a>
              <a class="nav-link px-0 py-1 text-body" href="#">The Steeping Process</a>
              <a class="nav-link px-0 py-1 text-body" href="#">Filtering &amp; Storage</a>
              <a class="nav-link px-0 py-1 text-body" href="#">Serving Suggestions</a>
            </nav>
          </div>
        </div>

        <!-- CTA Card -->
        <div class="card border-0 bg-dark text-white">
          <div class="card-body">
            <h5 class="card-title fw-semibold">Get the Recipe PDF</h5>
            <p class="card-text small">Download the printable cold brew ratio chart and step-by-step checklist.</p>
            <a href="#" class="btn btn-warning btn-sm w-100">Download Free PDF</a>
          </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 top offset to match your navbar height

If your site has a fixed navbar — for example 64px tall — use inline style `style="top: 64px"` or a custom CSS variable like `--bs-sticky-top: 64px` instead of the default `top-0`, otherwise the sticky sidebar will scroll behind the navbar on smaller viewports.

The parent column must be taller than the sidebar

`position-sticky` only works when the parent element has overflow set to `visible` (Bootstrap's default for columns) and the parent is taller than the sticky child — if the sidebar is longer than the main content, it will not stick and will simply scroll normally.

Add padding-top inside the sticky wrapper, not outside

Apply top padding (e.g. `pt-4`) inside the `position-sticky` div rather than as margin on the outer column — margin does not count toward the sticky threshold calculation and can cause the element to appear to jump when it transitions to the fixed position.

Use overflow-y-auto for sidebars taller than the viewport

If the sidebar content itself exceeds the viewport height — such as a long filter list — add `overflow-y: auto` and a `max-height: calc(100vh - 80px)` via utility or custom CSS so the sidebar itself becomes scrollable without the page losing the sticky behaviour.

FAQ

Why isn't my sticky sidebar sticking — it just scrolls away with the page?

The three most common causes are: (1) A parent element has `overflow: hidden` or `overflow: auto` set — these break `position: sticky` entirely, so check every ancestor element. (2) The sidebar column is as tall as or taller than the main content column, giving sticky nothing to do. (3) You forgot to include a `top-*` class or `top` CSS value — `position-sticky` requires an explicit top, right, bottom, or left offset to activate.

How do I control exactly how far from the top the sidebar stops?

Bootstrap 5 ships with `top-0` through `top-100` (in 25% steps) as utilities, which are rarely precise enough for a real navbar offset. The cleanest approach is to add a custom CSS class: `.sticky-sidebar { position: sticky; top: 72px; }` where 72px matches your fixed header height. You can also use a CSS custom property set on `:root` — `--navbar-height: 72px` — and reference it as `top: var(--navbar-height)` to keep offsets consistent site-wide.

How does Canvas Builder generate a Sticky Sidebar layout?

When you describe a two-column layout with a persistent sidebar to Canvas Builder, it outputs a complete Bootstrap 5 grid with the correct `position-sticky` wrapper, a `top` offset calibrated to any navbar height included in the same prompt, and the sidebar card content styled using your brand colours as Bootstrap CSS variable overrides on the card element. The generated code is fully responsive — the sticky behaviour is scoped inside a `col-lg-4` so on mobile the sidebar stacks below the content and behaves as a normal block element.