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.
Primary Class
fixed-bottom d-flexCommon 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 & Classes
| Variant | Description |
|---|---|
| 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. |
| 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. |
| 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. |
| 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. |
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 Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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–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.