Alerts and badges

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Alerts and badges—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Alerts and badges in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Alerts and badges in your own words.

Alerts communicate page-level feedback: alert alert-success with optional alert-dismissible and a close button. Badges annotate counts and status inline: badge text-bg-primary.

Accessibility

Alerts use role="alert" for important messages
Dismissible alerts need a visible close control with aria-label
Do not rely on color alone—include text (“Success”, “Error”)

Badges pair with headings (h2 + badge) or buttons for notification counts. Contrast and semantics tie back to CSS color and contrast principles.

Self-check

What class makes an alert closable?
When is a badge more appropriate than a full alert?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

alert vs toast—when each?
How do badges affect layout density?

No discussion yet. Be the first to ask a question.