Bootstrap 4 to 5 migration - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main change in Bootstrap 5 regarding jQuery?

Bootstrap 5 made a significant change about jQuery. What is it?

A Bootstrap 5 removed jQuery dependency completely.

B Bootstrap 5 requires jQuery version 4 or higher.

C Bootstrap 5 uses jQuery only for dropdowns.

D Bootstrap 5 replaced jQuery with Angular.

💡 Hint

Think about how Bootstrap 5 handles JavaScript plugins.

Bootstrap 5 no longer depends on jQuery. It uses plain JavaScript for its components.

📝 Syntax

intermediate

Which class replaces .form-row in Bootstrap 5?

Bootstrap 4 used .form-row for form layouts. What is the correct replacement in Bootstrap 5?

A .form-row remains the same in Bootstrap 5.

B .form-grid replaces .form-row in Bootstrap 5.

C .form-group replaces .form-row in Bootstrap 5.

D .row replaces .form-row in Bootstrap 5.

💡 Hint

Bootstrap 5 simplifies grid usage in forms.

Bootstrap 5 removed .form-row. Use .row instead for grid layouts in forms.

❓ selector

advanced

Which Bootstrap 5 utility class replaces .text-hide from Bootstrap 4?

Bootstrap 4 had a utility class .text-hide to hide text visually but keep it accessible. What is the Bootstrap 5 equivalent?

A .visually-hidden

B .sr-only

C .text-invisible

D .hidden-text

💡 Hint

Bootstrap 5 renamed accessibility utilities.

Bootstrap 5 replaced .text-hide and .sr-only with .visually-hidden for better clarity and accessibility.

❓ layout

advanced

How has the grid system gutter changed from Bootstrap 4 to 5?

Bootstrap 5 introduced a new way to control gutters in the grid system. Which statement is true?

A Bootstrap 5 gutters are controlled by margin utilities only.

B Bootstrap 5 removed gutters completely from the grid system.

C Bootstrap 5 uses <code>g-*</code> classes to control gutters instead of padding on columns.

D Bootstrap 5 gutters are fixed and cannot be changed.

💡 Hint

Look for new gutter utility classes in Bootstrap 5.

Bootstrap 5 introduced g-* classes (like g-0, g-3) to control gutters easily on rows and columns.

❓ accessibility

expert

What is the correct way to make a Bootstrap 5 modal accessible?

Bootstrap 5 modals have improved accessibility. Which attribute is essential to add to the modal dialog for screen readers?

A Add <code>aria-hidden="true"</code> to the modal dialog.

B Add <code>aria-labelledby</code> pointing to the modal title's ID.

C Add <code>role="button"</code> to the modal dialog.

D Add <code>tabindex="-1"</code> to the modal backdrop.

💡 Hint

Think about how screen readers identify modal content.

Adding aria-labelledby referencing the modal's title helps screen readers announce the modal properly.

Practice

1. Which of the following is a key change when migrating from Bootstrap 4 to Bootstrap 5?

easy

A. Reverting to older grid system from Bootstrap 3

B. Introduction of inline styles for layout

C. Removal of jQuery dependency

D. Use of <center> tag for centering content

Solution

1. Step 1: Understand Bootstrap 5 updates

   Bootstrap 5 removes the jQuery dependency to improve performance and modernize the framework.

2. Step 2: Identify incorrect options

   Options A, B, and C are incorrect because Bootstrap 5 uses CSS for layout (no inline styles), avoids deprecated tags like <center>, and updates the grid system rather than reverting.

3. Final Answer:

   Removal of jQuery dependency -> Option C

4. Quick Check:

   Bootstrap 5 no jQuery = D [OK]

Hint: Remember: Bootstrap 5 dropped jQuery for better speed [OK]

Common Mistakes:

• Thinking Bootstrap 5 uses deprecated HTML tags
• Assuming jQuery is still required
• Confusing grid system changes with older versions

2. Which is the correct way to update a Bootstrap 4 button class btn btn-primary to Bootstrap 5?

easy

A. btn-primary btn

B. btn btn-primary-5

C. button-primary

D. btn btn-primary remains the same in Bootstrap 5

Solution

1. Step 1: Check Bootstrap 5 button class changes

   Bootstrap 5 keeps button classes like btn btn-primary unchanged for backward compatibility.

2. Step 2: Verify other options

   Options B, C, and D are invalid class names and will not style the button correctly.

3. Final Answer:

   btn btn-primary remains the same in Bootstrap 5 -> Option D

4. Quick Check:

   Button classes stable = A [OK]

Hint: Button classes mostly unchanged from v4 to v5 [OK]

Common Mistakes:

• Adding extra numbers to class names
• Changing class order incorrectly
• Using non-existent class names

3. What will be the visual result of this Bootstrap 5 code snippet?

<div class="d-flex justify-content-center">
  <button class="btn btn-success">Click Me</button>
</div>

medium

A. A green button centered horizontally inside a flexible container

B. A green button aligned to the left inside a block container

C. A red button centered vertically

D. A button with no styling or alignment

Solution

1. Step 1: Analyze container classes

   The d-flex class makes the container a flexbox, and justify-content-center centers content horizontally.

2. Step 2: Analyze button classes

   The btn btn-success classes style the button green with Bootstrap's success theme.

3. Final Answer:

   A green button centered horizontally inside a flexible container -> Option A

4. Quick Check:

   Flex center + btn-success = C [OK]

Hint: d-flex + justify-content-center centers horizontally [OK]

Common Mistakes:

• Confusing justify-content-center with vertical centering
• Mixing button color classes
• Ignoring flex container effects

4. You have this Bootstrap 4 modal trigger button:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open</button>

What is the correct way to update it for Bootstrap 5?

medium

A. data-bs-toggle="modal" data-bs-target="#myModal"

B. data-toggle="modal" data-target="#myModal" (no change needed)

C. data-modal-toggle="myModal"

D. data-toggle-modal="#myModal"

Solution

1. Step 1: Identify Bootstrap 5 data attribute changes

   Bootstrap 5 prefixes data attributes with data-bs- to avoid conflicts, so data-toggle becomes data-bs-toggle.

2. Step 2: Verify correct attribute names

   data-bs-toggle="modal" data-bs-target="#myModal" uses correct new attributes. Options A, C, and D use old or invalid attributes.

3. Final Answer:

   data-bs-toggle="modal" data-bs-target="#myModal" -> Option A

4. Quick Check:

   Bootstrap 5 data attributes start with data-bs- [OK]

Hint: Add 'bs' prefix to data attributes in Bootstrap 5 [OK]

Common Mistakes:

• Leaving old data attributes unchanged
• Using incorrect attribute names
• Removing necessary attributes

5. You want to migrate a Bootstrap 4 grid layout using col-md-6 and offset-md-3 to Bootstrap 5. Which is the correct updated class for offset in Bootstrap 5?

medium

A. ms-md-3

B. offset-md-3 remains the same

C. offset-md-start-3

D. offset-md-3 replaced by offset-md-3-start

Solution

1. Step 1: Check offset class changes in Bootstrap 5

   Bootstrap 5 keeps offset classes like offset-md-3 unchanged for grid layout offsets.

2. Step 2: Analyze other options

   Options B, C, and D are invalid or do not exist in Bootstrap 5's grid system.

3. Final Answer:

   offset-md-3 remains the same -> Option B

4. Quick Check:

   Offset classes stable in Bootstrap 5 = A [OK]

Hint: Offset classes keep same names in Bootstrap 5 [OK]

Common Mistakes:

• Changing offset class names unnecessarily
• Confusing margin utilities with offset classes
• Using invalid class syntax