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.
Bootstrap class
No dedicated Bootstrap class
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 and classes
| Variant | Description and classes |
|---|---|
| Sticky column | Sidebar column that stays in view while the article scrolls.col-md-4 + position-sticky top-0 |
| Offset below a header | Leaves room for a sticky navbar above it.position-sticky + style="top: 5rem" |
| Sticky from a breakpoint | Only sticks on large screens; scrolls normally on mobile.sticky-lg-top |
| Sticky table of contents | Vertical nav linking to sections of the page.nav flex-column + nav-link |
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 to 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 & 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
Scroll inside the frame: the sidebar column stays in view while the article moves. It sits beside the article from the md breakpoint up.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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?
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?
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?
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.