Bootstrap 6 Callout

Callout

Callouts provide presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.

Available in Other JavaScript Frameworks

CoreUI Bootstrap 6 Callout is also available for Angular, React, and Vue. Explore framework-specific implementations below:

On this page

Default callout

Callouts accommodate text of any length, along with optional elements like icons and headings. .callout on its own is a neutral callout — a bordered surface with a thicker leading edge, inheriting the text color of its surroundings.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

html

<div class="callout">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>

Variants

The color comes from a .theme-* class, which may sit on the callout or on any element above it. It colors the leading edge and tints the border.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

html

<div class="callout theme-primary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-secondary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-success">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-info">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-warning">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-danger">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-inverse">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>

Conveying meaning to assistive technologies

Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It’s essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the .visually-hidden class.

Tinted callout

Because the theme class exposes every slot, the background utilities read from it too. Add .theme-subtle for a filled callout without naming a color twice.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

html

<div class="callout theme-subtle theme-primary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-secondary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-success">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-info">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-warning">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-danger">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout theme-subtle theme-inverse">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>

Deprecated markup

Deprecated in v6.0.0

The v5 spelling — .callout with a colour modifier — still works. Each colour class is generated from the same theme map as the class it replaces, so .callout-primary is .callout.theme-primary. They are removed in v7.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

html

<div class="callout callout-primary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-secondary">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-success">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-info">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-warning">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-danger">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>
<div class="callout callout-inverse">
  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
</div>

- <div class="callout callout-success">Saved</div>
+ <div class="callout theme-success">Saved</div>

Customizing

CSS variables

Callouts use local CSS variables on .callout for enhanced real-time customization.

scss

$callout-tokens: defaults(
  (
    --cui-callout-padding-x: var(--cui-spacer),
    --cui-callout-padding-y: var(--cui-spacer),
    --cui-callout-margin-x: 0,
    --cui-callout-margin-y: var(--cui-spacer),
    --cui-callout-border-width: var(--cui-border-width),
    --cui-callout-border-color: var(--cui-border-color),
    --cui-callout-border-left-width: calc(var(--cui-border-width) * 4),
    --cui-callout-border-left-color: var(--cui-callout-border-color),
    --cui-callout-border-radius: var(--cui-radius-5),
  ),
  $callout-tokens
);

Sass loops

Deprecated in v6.0.0

The loop that creates the deprecated color classes, pointing each one at the matching theme color. It lives in the opt-in coreui-legacy.css, not in coreui.css.

scss

@each $state in map.keys($theme-colors) {
  .callout-#{$state} {
    @include theme-tokens($state);
  }
}