Bootstrap 5Content

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.

Primary Class

.callout

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 & Classes

Variant	Description	Classes
Callout Default	Standard callout with Bootstrap's default styling.	`callout`
Callout Responsive	Responsive variant that adapts to different screen sizes.	`callout callout-responsive`

Code Example

<div class="callout callout-warning">
  <h5 class="callout-heading">Before you upgrade</h5>
  <p>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="callout callout-info mt-4">
  <h5 class="callout-heading">API rate limits</h5>
  <p>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

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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?

Not natively. Bootstrap 5 ships with Alert components, but Callouts are a convention popularised by Bootstrap's own documentation site and adopted by premium themes like Canvas. They are typically implemented as custom CSS classes — often .callout, .callout-info, .callout-warning, .callout-danger, and .callout-success — built on top of Bootstrap's colour and spacing tokens. If you're using the Canvas HTML template, these classes are already defined and ready to use.

How do I customise the left-border accent colour of a callout to match my brand?

The most maintainable approach is to override the CSS custom property or the specific class in your own stylesheet. For example: `.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.

How does Canvas Builder handle Callout components?

When you describe a callout in your Canvas Builder prompt — for example, 'add a warning callout before the installation steps' — the AI selects the appropriate variant class (callout-warning, callout-info, etc.), writes contextually relevant heading and body copy, and outputs production-ready HTML using the Canvas template's pre-built callout styles. It respects your brand colour definitions so the border accent and background tint align with your palette automatically.