Bootstrap 4 to 5 migration - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the new default font size unit in Bootstrap 5 compared to Bootstrap 4?

Bootstrap 5 uses rem units by default for font sizes instead of px in Bootstrap 4. This improves scalability and accessibility.

intermediate

Which Bootstrap 4 component was removed in Bootstrap 5 and replaced with utilities?

The Jumbotron component was removed in Bootstrap 5. Instead, you can use spacing and typography utilities to create similar layouts.

intermediate

How did Bootstrap 5 change the grid system compared to Bootstrap 4?

Bootstrap 5 introduced a new xxl breakpoint for extra large screens and dropped support for Internet Explorer 10 and 11, allowing use of CSS Grid and improved flexbox.

beginner

What major JavaScript library dependency was removed in Bootstrap 5?

Bootstrap 5 removed the dependency on jQuery. All JavaScript plugins are now written in vanilla JavaScript for better performance and smaller bundle size.

intermediate

How did Bootstrap 5 improve form controls compared to Bootstrap 4?

Bootstrap 5 redesigned form controls with better custom styles, improved accessibility, and new classes like .form-floating for floating labels.

Which component was removed in Bootstrap 5?

A Navbar

B Card

C Jumbotron

D Modal

Bootstrap 5 removed the Jumbotron component. Cards, Navbar, and Modal remain.

What JavaScript library is no longer required in Bootstrap 5?

A React

B Angular

C Vue

D jQuery

Bootstrap 5 dropped jQuery dependency and uses vanilla JavaScript.

Bootstrap 5 introduced which new grid breakpoint?

A xxl

B xs

C md

D xl

Bootstrap 5 added the xxl breakpoint for very large screens.

Which CSS unit is preferred for font sizes in Bootstrap 5?

A px

B rem

C %

D em

Bootstrap 5 uses rem units for better scalability.

How are floating labels implemented in Bootstrap 5?

A Using .form-floating class

B Using .floating-label class

C Using JavaScript plugin

D Not supported

Bootstrap 5 uses the .form-floating class for floating labels.

Explain the key JavaScript changes when migrating from Bootstrap 4 to Bootstrap 5.

Think about how Bootstrap handles interactive components.

Describe the main differences in the grid system between Bootstrap 4 and Bootstrap 5.

Consider screen sizes and browser support.

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