Alert variants and colors in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap alert with a primary color.

Bootsrap

<div class="alert alert-[1]" role="alert">
  This is a primary alert—check it out!
</div>

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

Aprimary

Bdanger

Csuccess

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not a Bootstrap alert variant

Forgetting to add the alert- prefix

The class alert-primary gives the alert a blue primary color in Bootstrap.

2fill in blank

medium

Complete the code to create a Bootstrap alert with a danger variant.

Bootsrap

<div class="alert alert-[1]" role="alert">
  This is a danger alert—be careful!
</div>

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

Ainfo

Bwarning

Cdanger

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert-warning instead of alert-danger

Misspelling the variant name

The alert-danger class creates a red alert to indicate danger or errors.

3fill in blank

hard

Fix the error in the alert class to show a success alert with green color.

Bootsrap

<div class="alert [1]" role="alert">
  Operation completed successfully!
</div>

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

Aalert-success

Balert success

Calert-successful

Dsuccess-alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of dashes in class names

Adding extra letters to the variant name

The correct Bootstrap class for a green success alert is alert-success. It must be one word with a dash.

4fill in blank

hard

Fill both blanks to create a Bootstrap alert with a warning variant and add the role attribute.

Bootsrap

<div class="alert alert-[1]" role="[2]">
  Warning! Check your input.
</div>

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

Awarning

Balert

Cdanger

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using button as the role instead of alert

Choosing the wrong variant color

The class alert-warning creates a yellow warning alert. The role attribute should be alert for accessibility.

5fill in blank

hard

Fill all three blanks to create a dismissible Bootstrap alert with a success variant and the correct button attributes.

Bootsrap

<div class="alert alert-[1] alert-dismissible fade show" role="alert">
  Success! Your action was completed.
  <button type="button" class="btn-close" data-bs-dismiss="[2]" aria-label="[3]"></button>
</div>

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

Adanger

Balert

CClose

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variant like danger instead of success

Incorrect data-bs-dismiss value

Wrong aria-label text

The alert variant is alert-success for green color. The button dismisses the alert and the aria-label should be Close for screen readers.

Practice

1. Which Bootstrap class would you use to create a green alert box indicating success?
<div class="alert ?" role="alert">Success message</div>

easy

A. alert-warning

B. alert-success

C. alert-danger

D. alert-info

Solution

1. Step 1: Understand Bootstrap alert color meanings

   Bootstrap uses alert-success for green alerts indicating success.

2. Step 2: Match the class to the color green

   The alert-success class applies green background and border to the alert box.

3. Final Answer:

   alert-success -> Option B

4. Quick Check:

   Green alert = alert-success [OK]

Hint: Success alerts are always green with alert-success class [OK]

Common Mistakes:

• Using alert-danger for success (red color)
• Using alert-warning which is yellow
• Confusing alert-info with success

2. Which of the following is the correct syntax to create a Bootstrap alert with a blue background for informational messages?
<div class="alert ?" role="alert">Info message</div>

easy

A. alert-light

B. alert-primary

C. alert-info

D. alert-dark

Solution

1. Step 1: Identify the class for informational alerts

   Bootstrap uses alert-info for blue background alerts that show info messages.

2. Step 2: Confirm syntax correctness

   The class alert-info is the correct class to apply blue styling for info alerts.

3. Final Answer:

   alert-info -> Option C

4. Quick Check:

   Info alert = alert-info [OK]

Hint: Info alerts use alert-info class for blue color [OK]

Common Mistakes:

• Using alert-primary which is darker blue but not info
• Using alert-light which is very pale
• Using alert-dark which is black/dark gray

3. What color will the alert box have when using this code?

<div class="alert alert-warning" role="alert">Warning!</div>

medium

A. Yellow background

B. Blue background

C. Green background

D. Red background

Solution

1. Step 1: Identify the alert variant class

   The class alert-warning is used for warning alerts in Bootstrap.

2. Step 2: Recall the color for warning alerts

   Bootstrap styles alert-warning with a yellow background to indicate caution or warning.

3. Final Answer:

   Yellow background -> Option A

4. Quick Check:

   Warning alert = yellow background [OK]

Hint: Warning alerts always have yellow backgrounds [OK]

Common Mistakes:

• Confusing warning with danger (red)
• Thinking warning is green
• Mixing up warning with info (blue)

4. You wrote this code but the alert is not accessible to screen readers:

<div class="alert alert-danger">Error occurred</div>

What is missing or incorrect?

medium

A. The alert-danger class does not exist in Bootstrap

B. Class name should be danger instead of alert-danger

C. The alert class is missing, only alert-danger is present

D. Missing role="alert" attribute for accessibility

Solution

1. Step 1: Check the alert classes used

   The code uses both alert and alert-danger classes correctly, so the styling should apply.

2. Step 2: Identify missing accessibility attribute

   Bootstrap recommends adding role="alert" for screen readers to recognize the alert properly.

3. Final Answer:

   Missing role="alert" attribute for accessibility -> Option D

4. Quick Check:

   Alerts need role="alert" for proper behavior [OK]

Hint: Always add role="alert" for Bootstrap alerts [OK]

Common Mistakes:

• Thinking alert-danger class is wrong
• Forgetting to add alert base class
• Assuming alert-danger does not exist

5. You want to create a Bootstrap alert that changes color based on a variable status in JavaScript. Which approach correctly applies the alert variant class dynamically?

const status = 'danger';
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-' + status;
alertDiv.setAttribute('role', 'alert');
alertDiv.textContent = 'Status message';
document.body.appendChild(alertDiv);

hard

A. This code correctly applies the alert-danger class dynamically

B. You must use alert-danger directly, not concatenate strings

C. The role attribute should be set to 'status' instead of 'alert'

D. alertDiv.className should be set to 'alert-danger' only

Solution

1. Step 1: Understand dynamic class assignment

   The code concatenates 'alert-' with the variable status to form 'alert-danger', which is valid.

2. Step 2: Verify role attribute and appending

   The role is correctly set to 'alert' for accessibility, and the element is appended to the document body.

3. Final Answer:

   This code correctly applies the alert-danger class dynamically -> Option A

4. Quick Check:

   Dynamic class with 'alert-' + status works [OK]

Hint: Concatenate 'alert-' with status variable for dynamic alerts [OK]

Common Mistakes:

• Hardcoding class instead of using variable
• Setting wrong role attribute
• Not appending alert to the DOM