Bootstrap 5 Callout
A Callout is a styled block element used to draw attention to important information, warnings, tips, or notices within page content. Unlike alerts, callouts are typically non-dismissible and are embedded inline with editorial content rather than triggered by user actions. Use them when you need to surface critical context, caveats, or supplementary details without interrupting the reading flow.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- Highlighting a deprecation warning inside API or developer documentation so readers don't miss breaking changes
- Surfacing a billing caveat on a pricing page, for example, noting that annual plans are non-refundable after 30 days
- Calling out a prerequisite step in a tutorial, such as requiring Node.js 18+ before running an install command
- Drawing attention to a legal or compliance note in a terms-of-service or data privacy section without using a full modal
Variants and classes
| Variant | Description and classes |
|---|---|
| Left border callout | Coloured left border on a tinted background.border-start border-4 border-warning bg-warning-subtle p-3 rounded-end |
| Info callout | Same pattern in the info colour.border-info + bg-info-subtle |
| Callout heading | Short bold heading above the text.fw-semibold mb-1 |
| Alert as callout | Bootstrap alert used for a static note.alert alert-info |
Code example
<div class="border-start border-4 border-warning bg-warning-subtle p-3 rounded-end mb-4">
<h5 class="fw-semibold mb-1">Before you upgrade</h5>
<p class="mb-0">Upgrading from v2 to v3 requires a database migration. Back up your data and run <code>php artisan migrate</code> before deploying the new release. Skipping this step will result in data loss.</p>
</div>
<div class="border-start border-4 border-info bg-info-subtle p-3 rounded-end">
<h5 class="fw-semibold mb-1">API rate limits</h5>
<p class="mb-0">Free-tier accounts are limited to 100 requests per minute. If you exceed this limit, the API returns a <code>429 Too Many Requests</code> response. Upgrade to a paid plan for higher limits.</p>
</div>Live examples
Basic Callout
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 callout with custom colours
- Callout with interactive states
- Responsive callout for all screen sizes
Best practices
Use semantic colour variants consistently
Reserve callout-danger for genuine errors or destructive actions, callout-warning for things users might overlook to their detriment, and callout-info for neutral supplementary context, mixing these arbitrarily trains users to ignore them.
Keep callout headings scannable
Use an <h5> heading that states the consequence or action ('Back up first', 'Rate limits apply') rather than a vague label like 'Note' or 'Important', so users scanning the page understand the callout's relevance instantly.
Avoid stacking multiple callouts back-to-back
If you have three or more consecutive callouts, consolidate them into a structured list or table, consecutive callouts lose emphasis and create visual noise that causes readers to skip them entirely.
Pair left-border callouts with the correct Bootstrap border utility
For a left-accent style common in documentation sites, combine border-start border-4 with a contextual border colour class like border-warning and ps-3. This avoids writing custom CSS while staying on-brand.
FAQ
Is Callout a built-in Bootstrap 5 component?
How do I customise the left-border accent colour of a callout to match my brand?
.callout-primary { border-left: 4px solid var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.08); }. By referencing Bootstrap 5's CSS custom properties (--bs-primary, --bs-warning, etc.), your callout automatically updates whenever you redefine those brand colours in your theme, without touching the callout styles again.