Bootstrap 5 Announcement Bar
An announcement bar is a full-width, horizontally centred strip that sits above the primary navigation to surface time-sensitive messages such as promotions, outages or policy changes. It is composed from Bootstrap 5's alert component, flexbox utilities, spacing helpers and optionally the dismissible alert JavaScript plugin. Use it when a message must be visible before the user interacts with any other part of the page.
Primary Class
.alert .d-flex .justify-content-center .align-items-centerCommon Use Cases
- →An e-commerce site displays a dismissible announcement bar during a 48-hour sitewide sale, showing the discount code and a link to eligible products.
- →A SaaS platform shows a persistent red bar at the top of every page to warn users of a scheduled maintenance window on a specific date and time.
- →A legal services firm adds an announcement bar to notify visitors that its privacy policy has been updated, with a link to the revised document.
- →A conference website uses a countdown-enabled announcement bar to display the number of days remaining before early-bird ticket pricing expires.
Variants & Classes
| Variant | Description |
|---|---|
| Dismissible | Uses Bootstrap's built-in alert-dismissible class and data-bs-dismiss attribute to render a close button. The bar collapses via the Alert JavaScript plugin with no custom JS required. |
| Sticky | Combines the dismissible pattern with position-sticky and top-0 so the bar remains visible as the user scrolls. A high z-index utility keeps it above fixed navbars. |
| Minimal Dark | A dark background variant using Bootstrap 5.3 colour utilities (bg-dark text-white) for sites that lead with a dark-mode aesthetic. No dismissal; intended as a permanent informational strip. |
| Brand Accent | Uses bg-primary text-white to match the site's primary brand colour. Suitable for feature announcements or new product launches where the bar should feel celebratory rather than cautionary. |
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Announcement Bar – Bootstrap 5</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
/* Ensures the sticky bar layers above a fixed-top navbar */
.announcement-bar {
z-index: 1031;
}
</style>
</head>
<body>
<!-- Sticky Dismissible Announcement Bar -->
<div class="alert alert-warning alert-dismissible fade show d-flex justify-content-center align-items-center w-100 rounded-0 m-0 position-sticky top-0 announcement-bar py-2 px-3" role="alert">
<span class="me-2 fw-semibold">🎉 Flash sale:</span>
<span>Use code <strong>SAVE20</strong> at checkout for 20% off all orders today.</span>
<a href="/sale" class="ms-3 alert-link fw-semibold text-nowrap">Shop now</a>
<button type="button" class="btn-close ms-3" data-bs-dismiss="alert" aria-label="Close announcement"></button>
</div>
<!-- Simulated navbar below the bar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Products</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<main class="container py-5">
<h1 class="mb-3">Page content</h1>
<p class="text-muted">Scroll the page to see the sticky announcement bar remain at the top of the viewport.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Dismissible Warning Bar
A dismissible amber bar suitable for maintenance or policy notices. Uses Bootstrap's alert-warning and alert-dismissible classes with no custom CSS.
Permanent Dark Info Bar
A non-dismissible dark strip for persistent brand messaging or cookie notices. Built entirely from bg-dark, text-white and flex utilities — no alert component needed.
Brand Accent Bar with CTA
A bg-primary bar for a product launch or major feature announcement. Uses text-white, border-0 and a white outline button to keep contrast WCAG AA compliant.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Dismissible sale-code bar with amber alert styling generated from a promotional prompt
- ✓Sticky maintenance-warning bar with red background pinned above the navbar
- ✓Dark cookie-consent strip with Accept and Decline buttons
- ✓Brand-primary launch announcement bar with an inline call-to-action button
- ✓Canvas Builder auto-generates announcement bars from prompts like 'add a dismissible top bar announcing free shipping'
Best Practices
Use role and aria-label for accessibility
Bootstrap's alert role conveys urgency to screen readers, but for permanent non-alert bars (built without .alert) you should add role="region" and a descriptive aria-label. Avoid role="alert" on bars that do not describe an error or urgent status change, as assistive technologies will announce them immediately and intrusively.
Prevent layout shift when the bar is dismissed
The .fade.show classes on an alert-dismissible bar cause the element to fade out and then be removed from the DOM, which can cause the sticky navbar below it to jump upward. If layout stability matters, set a fixed min-height on the bar's parent container or use a CSS transition on the navbar's top offset rather than relying on the default collapse.
z-index stacking with fixed navbars
Bootstrap's .fixed-top navbar uses z-index 1030. A sticky announcement bar must declare z-index 1031 or higher (Bootstrap 5.3 utility class z-3 equals 3, not 1031) to layer above it correctly. For precise control, set the z-index in a small inline style block or a custom utility rather than relying solely on the z-3 utility class.
Avoid nesting interactive elements inside aria-live regions
If you decide to use aria-live="polite" to announce dynamic countdown content, do not place buttons or links inside the same live region — screen readers will re-read the entire region on every update, interrupting keyboard navigation. Keep the live region to a separate, text-only span and place controls outside it.