Bootsrapmarkup~30 mins

Badge component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Badge Component

📖 Scenario: You are creating a simple webpage to show a notification badge next to a message. Badges are small count indicators often used in apps to show new messages or alerts.

🎯 Goal: Build a webpage that displays a message with a Bootstrap badge showing the number 5 as a notification count.

📋 What You'll Learn

Use Bootstrap 5 classes to create a badge

Display the badge next to the text 'Messages'

Use the badge color bg-primary

Include the correct HTML5 document structure with lang, charset, and viewport meta tags

Make sure the badge is accessible with appropriate semantic HTML

💡 Why This Matters

🌍 Real World

Badges are commonly used in websites and apps to show notifications, message counts, or status indicators.

💼 Career

Knowing how to use Bootstrap badges helps you quickly build user interfaces that communicate important information clearly and accessibly.

Progress0 / 4 steps

Create the basic HTML structure

Create a basic HTML5 document with lang="en", charset="UTF-8", and a viewport meta tag. Add a <main> element inside the <body>.

Bootsrap




    
    
    Badge Example

Need a hint?

Remember to include the lang attribute in the <html> tag and the meta tags inside <head>.

Add Bootstrap CSS link

Inside the <head>, add the Bootstrap 5 CSS CDN link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css using a <link> tag with rel="stylesheet".

Bootsrap




    
    
    Badge Example

Need a hint?

Use a <link> tag with rel="stylesheet" and the exact href URL for Bootstrap CSS.

Add the message text with a badge

Inside the <main> element, add a <span> with the text Messages. Next to it, add a Bootstrap badge using a <span> with classes badge and bg-primary that displays the number 5.

Bootsrap




    
    
    Badge Example

Need a hint?

Use two <span> elements: one for the text and one for the badge with classes badge and bg-primary.

Make the badge accessible and visually clear

Add an aria-label="5 new messages" attribute to the badge <span> to improve accessibility. Also, wrap the message and badge inside a <div> with class d-inline-flex align-items-center gap-2 to align them nicely.

Bootsrap




    
    
    Badge Example

Need a hint?

Use a <div> with Bootstrap flex classes to align items and add aria-label to the badge for screen readers.