Bootstrap 5 Sticky CTA
A Sticky CTA is a fixed-position bar or button that remains visible at the bottom (or top) of the viewport as the user scrolls, prompting a single primary action. It is composed from Bootstrap 5.3 utilities (chiefly fixed-bottom or fixed-top, flex layout helpers, spacing utilities, and the btn component) with no custom component class required from Bootstrap itself. Use it when a primary conversion action (sign-up, download, purchase) must stay accessible throughout long-scrolling pages without interrupting reading flow.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- A SaaS pricing page that keeps a 'Start Free Trial' button pinned to the bottom of the viewport so prospects can convert at any point while comparing plan tiers.
- A legal or cookie-consent banner that must remain on screen until the user explicitly accepts or dismisses it, ensuring compliance visibility across all scroll positions.
- A mobile product page for an e-commerce store where 'Add to Basket' is fixed at the bottom so shoppers never have to scroll back to the top to purchase.
- A webinar registration landing page that pins a countdown timer alongside a 'Reserve My Seat' button so urgency and the action remain coupled as visitors read speaker bios.
Variants and classes
| Variant | Description and classes |
|---|---|
| Full-width bottom bar | A full-width bar pinned to the bottom of the viewport containing a headline, supporting text, and a primary action button. Composed with fixed-bottom, bg-dark, text-white, d-flex, align-items-center, justify-content-between, and px-4 py-3.fixed-bottom bg-dark text-white d-flex align-items-center justify-content-between px-4 py-3 |
| Centred pill button | A minimal floating button centred above the bottom edge, ideal for mobile-first single-action prompts. Uses fixed-bottom, d-flex, justify-content-center, pb-4, and a rounded-pill btn to appear as a floating element rather than a full bar.fixed-bottom d-flex justify-content-center pb-4 |
| Dismissible banner | A full-width sticky bar that includes a close button powered by Bootstrap's data-bs-dismiss or a custom click handler that adds d-none. Composed with fixed-bottom, alert, alert-warning, d-flex, align-items-center, mb-0, and .btn-close.fixed-bottom alert alert-warning d-flex align-items-center mb-0 |
| Top sticky CTA | Pinned below a navbar at the top of the viewport using fixed-top with a top offset via an inline style or a small custom rule. Useful for site-wide promotions or maintenance notices paired with a single action.fixed-top bg-primary text-white d-flex align-items-center justify-content-center py-2 |
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticky CTA | Bootstrap 5</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
/* Prevent page content from being obscured by the fixed bar */
body { padding-bottom: 80px; }
.sticky-cta-bar { z-index: 1030; box-shadow: 0 -2px 8px rgba(0,0,0,.15); }
</style>
</head>
<body>
<!-- Page content -->
<div class="container py-5">
<h1>Long-scrolling landing page</h1>
<p class="lead">Scroll down to see the sticky CTA remain fixed at the bottom of the viewport.</p>
<!-- Simulate height -->
<div style="height:150vh"></div>
</div>
<!-- Sticky CTA Bar -->
<div class="fixed-bottom bg-dark text-white d-flex align-items-center justify-content-between px-4 py-3 sticky-cta-bar" id="stickyCta" role="region" aria-label="Call to action">
<div>
<strong>Limited offer ends Friday.</strong>
<span class="d-none d-md-inline text-white-50 ms-2">Get 3 months free on any annual plan.</span>
</div>
<div class="d-flex align-items-center gap-3">
<a href="#pricing" class="btn btn-primary btn-sm">Start Free Trial</a>
<button type="button" class="btn-close btn-close-white" aria-label="Dismiss offer" id="closeStickyCta"></button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('closeStickyCta').addEventListener('click', function () {
var bar = document.getElementById('stickyCta');
bar.classList.add('d-none');
document.body.style.paddingBottom = '0';
});
</script>
</body>
</html>Live examples
Mobile floating pill button
A centred rounded-pill button floating above the bottom edge, common on mobile product pages where a full bar feels too heavy.
Cookie / consent banner
A dismissible sticky bar built with Bootstrap's alert utilities, satisfying a common legal requirement without a third-party library.
Top promotional ribbon
A sticky bar pinned at the top below a navbar, promoting a site-wide sale with a single action link. Uses fixed-top with a top offset to sit below a 56 px navbar.
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:
- Full-width dark bottom bar with dismiss button generated from a 'sticky sign-up CTA' prompt in Canvas Builder
- Floating pill button variant produced when Canvas Builder detects a mobile-first single-product layout
- Dismissible cookie-consent bar auto-composed by Canvas Builder when legal or privacy keywords appear in the prompt
- Top promotional ribbon placed below a fixed navbar when Canvas Builder identifies a sale or announcement prompt
- Countdown timer paired with a sticky CTA button, generated by Canvas Builder for webinar or event landing page prompts
Best practices
Always add body padding equal to the bar's height
A fixed-bottom element overlaps page content because it is removed from normal document flow. Measure the rendered height of your bar (typically 56 to 80 px) and apply that value as padding-bottom on body, either in a <style> block or via JavaScript after the bar renders. If the bar is dismissible, reset the padding when it is hidden to avoid an empty gap.
Use z-index deliberately and stay within Bootstrap's stack
Bootstrap's fixed utilities default to z-index 1030, which sits above most content but below modals (1055) and tooltips (1080). If your page has a sticky navbar also at 1030, give your CTA bar a slightly lower z-index (e.g. 1029 for a top ribbon offset below the navbar) using an inline style or a scoped custom rule to avoid overlap conflicts without disrupting the rest of the z-index scale.
Test scroll behaviour on iOS Safari before shipping
iOS Safari's dynamic toolbar shrinks and expands on scroll, which can cause fixed-bottom elements to jump or be clipped. Using env(safe-area-inset-bottom) in padding-bottom on the bar itself (e.g. padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) prevents content from being hidden behind the home indicator on notched devices.
Keep the CTA to a single, unambiguous action
Multiple competing actions in a sticky bar dilute the click-through rate and confuse screen-reader users who encounter the region on every focus cycle. Limit the bar to one primary button and at most one secondary text link or a dismiss control; this also keeps the bar compact enough to avoid eating too much vertical space on small screens.