Badge component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple badge with Bootstrap.

Bootsrap

<span class="badge bg-[1]">New</span>

Drag options to blanks, or click blank then click option'

Acontainer

Balert

Cbutton

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like 'alert' or 'button' for badge background.

Forgetting the 'bg-' prefix before the color name.

The class bg-primary applies the primary color background to the badge.

2fill in blank

medium

Complete the code to add a badge inside a button with Bootstrap.

Bootsrap

<button type="button" class="btn btn-[1]">Messages <span class="badge bg-[1]">4</span></button>

Drag options to blanks, or click blank then click option'

Afooter

Binfo

Cprimary

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated classes like 'footer' which do not style buttons.

Mismatching button and badge colors.

Using btn-primary and bg-primary gives the button and badge a matching primary color.

3fill in blank

hard

Fix the error in the badge code to show a pill-shaped badge.

Bootsrap

<span class="badge rounded-[1] bg-success">99+</span>

Drag options to blanks, or click blank then click option'

Apill

Bsquare

Ccircle

Drounded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rounded' instead of 'rounded-pill' for pill shape.

Using invalid classes like 'circle' or 'square' which do not exist.

The class rounded-pill makes the badge pill-shaped with rounded edges.

4fill in blank

hard

Fill both blanks to create a badge with a light background and dark text.

Bootsrap

<span class="badge bg-[1] text-[2]">Light Badge</span>

Drag options to blanks, or click blank then click option'

Alight

Bdark

Cprimary

Dwhite

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-white on a light background, making text hard to read.

Using bg-primary instead of bg-light for light background.

The bg-light class gives a light background, and text-dark ensures the text is visible with dark color.

5fill in blank

hard

Fill all three blanks to create a badge inside a button with a pill shape and warning color.

Bootsrap

<button type="button" class="btn btn-[1]">Alerts <span class="badge rounded-[2] bg-[3]">5</span></button>

Drag options to blanks, or click blank then click option'

Awarning

Bpill

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched colors between button and badge.

Using rounded instead of rounded-pill for pill shape.

The button uses btn-warning for a warning color, the badge is pill-shaped with rounded-pill, and the badge background matches with bg-warning.