Bootstrap 5 CTA Banner
A CTA (call-to-action) banner is a full-width or contained section that combines a headline, supporting copy, and one or more action buttons to prompt a specific user response. It is not an official Bootstrap 5 component; instead it is composed from Bootstrap's container, row, col, bg-* colour utilities, p-* spacing utilities, and optionally the card primitive. Use it at key conversion points in a page — above the fold, between content sections, or at the footer — where you need to direct visitors toward a single primary action.
Primary Class
d-flex align-items-center justify-content-betweenCommon Use Cases
- →A SaaS pricing page uses a full-width CTA banner between the feature list and the footer to prompt visitors to start a free trial before they leave.
- →An e-commerce site places a split CTA banner after its bestseller grid, with a promotional headline on the left and an 'Add to wishlist' button on the right.
- →A recruitment agency's homepage uses a two-column CTA banner to simultaneously target job seekers with 'Browse roles' and employers with 'Post a vacancy'.
- →A documentation site appends a sticky bottom CTA banner that persists while scrolling, inviting readers to join a developer newsletter without interrupting reading flow.
Variants & Classes
| Variant | Description |
|---|---|
| Full-Width Solid | A single-colour band spanning the full viewport width with centred headline and button, built from bg-primary, text-white, and text-center utilities on a standard container-fluid section. |
| Split Two-Column | A left-right layout placing copy in one column and button(s) in the other using Bootstrap's row and col-md-* grid, aligned with align-items-center so the button sits vertically centred beside taller copy. |
| Card-Contained | A CTA wrapped inside Bootstrap's card component, giving it a border, shadow, and rounded corners so it sits as an inset element within a content page rather than bleeding edge-to-edge. |
| Gradient with Overlay | Uses a custom inline style for a CSS gradient background combined with Bootstrap text and button utilities, suitable for hero-adjacent banners where brand colour needs more visual depth than a flat bg-* class provides. |
Code Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CTA Banner – Bootstrap 5</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.cta-gradient {
background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}
</style>
</head>
<body>
<!-- Full-Width Solid CTA Banner -->
<section class="bg-primary text-white py-5">
<div class="container text-center">
<h2 class="fw-bold mb-3">Ready to ship faster?</h2>
<p class="lead mb-4 mx-auto" style="max-width:560px">Join over 12,000 teams that use our platform to cut release cycles in half. No credit card required.</p>
<a href="#" class="btn btn-light btn-lg me-2">Start free trial</a>
<a href="#" class="btn btn-outline-light btn-lg">See how it works</a>
</div>
</section>
<!-- Split Two-Column CTA Banner -->
<section class="bg-body-secondary py-4">
<div class="container">
<div class="row align-items-center gy-3">
<div class="col-md-8">
<h3 class="fw-semibold mb-1">Hiring now — remote roles across engineering and design</h3>
<p class="text-body-secondary mb-0">We're a fully remote team of 80+ across 20 countries. Salary bands published upfront.</p>
</div>
<div class="col-md-4 text-md-end">
<a href="#" class="btn btn-primary btn-lg">View open roles</a>
</div>
</div>
</div>
</section>
<!-- Card-Contained CTA Banner -->
<section class="py-5">
<div class="container">
<div class="card border-0 shadow-sm">
<div class="card-body p-4 p-md-5 text-center">
<span class="badge bg-warning text-dark mb-3">Limited offer</span>
<h2 class="fw-bold mb-3">Get 3 months free on any annual plan</h2>
<p class="text-body-secondary mb-4 mx-auto" style="max-width:520px">Upgrade before 31 August and lock in this year's pricing for the lifetime of your subscription.</p>
<a href="#" class="btn btn-warning btn-lg fw-semibold">Claim your discount</a>
</div>
</div>
</div>
</section>
<!-- Gradient CTA Banner -->
<section class="cta-gradient text-white py-5">
<div class="container">
<div class="row align-items-center gy-4">
<div class="col-lg-7">
<h2 class="fw-bold mb-2">Power up your analytics in minutes</h2>
<p class="mb-0 opacity-75">Connect your data warehouse, invite your team, and start querying with plain English — no SQL required.</p>
</div>
<div class="col-lg-5 text-lg-end">
<a href="#" class="btn btn-light btn-lg me-2 fw-semibold">Get started free</a>
<a href="#" class="btn btn-outline-light btn-lg">Book a demo</a>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Sticky Bottom CTA Banner
A fixed banner anchored to the bottom of the viewport, useful for persistent newsletter sign-up prompts or upgrade nudges on documentation and blog pages.
Minimal Inline CTA Banner
A lightweight single-line banner suitable for embedding between blog post sections or inside a sidebar, using only spacing and border utilities rather than a coloured background.
Two-CTA Audience Split Banner
A side-by-side banner with two distinct columns, each targeting a different audience segment with its own headline, body copy, and button — separated by a vertical divider on large screens.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Full-width solid-colour CTA banner generated from a single prompt in Canvas Builder
- ✓Split two-column CTA banner with dual audience buttons auto-generated by Canvas Builder
- ✓Card-contained CTA banner with badge and shadow produced by Canvas Builder
- ✓Gradient CTA banner with right-aligned button group created via Canvas Builder
- ✓Sticky bottom newsletter CTA banner output by Canvas Builder from a layout prompt
Best Practices
Limit to one primary action per banner
A CTA banner with two equally weighted buttons causes decision paralysis. Visually distinguish the primary button (btn-primary or btn-light on a dark background) from any secondary option (btn-outline-*). Reserve dual-CTA layouts only for genuine audience-split scenarios where the two actions are mutually exclusive.
Use max-width on body copy inside full-width banners
When the banner spans the full viewport, a paragraph that stretches to 1400 px becomes unreadable. Apply a max-width inline style (typically 520–620 px) and margin auto on the copy element. This preserves legibility at large breakpoints without adding an extra wrapper element.
Mind colour contrast on gradient backgrounds
Bootstrap's bg-primary passes WCAG AA for white text, but a custom CSS gradient may not. Test your specific gradient end-colours against white or dark text using a contrast checker before shipping. If in doubt, place a semi-transparent dark overlay (background: rgba(0,0,0,0.3)) beneath the text rather than relying solely on the gradient.
Avoid nesting a sticky CTA inside another position:fixed element
If your page already has a fixed navbar using Bootstrap's navbar-fixed-top class or sticky-top utility, a second fixed CTA banner at the bottom is fine because they occupy opposite edges. However, if you embed the sticky banner inside a fixed sidebar, stacking contexts will clip it. Always attach sticky banners directly to the body-level DOM, not inside overflow:hidden parents.