Bootstrap 4 to 5 migration - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the Bootstrap 4 class to Bootstrap 5 for responsive containers.

Bootsrap

<div class="container[1]">
  Content here
</div>

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

A-sm

B-fixed

C-responsive

D-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using container-fluid which is always full-width.

Using non-existent container-responsive.

In Bootstrap 5, new responsive container classes like container-sm provide fluid width below the sm breakpoint and container max-width above. This is a key new feature.

2fill in blank

medium

Complete the code to replace the Bootstrap 4 class .form-group with the Bootstrap 5 equivalent.

Bootsrap

<div class="[1]">
  <label for="inputEmail">Email address</label>
  <input type="email" class="form-control" id="inputEmail">
</div>

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

Aform-row

Bmb-3

Cform-group

Dform-control-group

Attempts:

3 left

💡 Hint

Common Mistakes

Continuing to use .form-group which is removed in Bootstrap 5.

Using .form-row which is for grid layout, not spacing.

Bootstrap 5 removed .form-group. Instead, spacing utilities like .mb-3 are used to add margin below form elements.

3fill in blank

hard

Fix the error in the Bootstrap 5 navbar code by replacing the deprecated class.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" [1]="page" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>

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

Aaria-current

Baria-hidden

Caria-label

Daria-live

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping the .sr-only class which is removed in Bootstrap 5.

Using unrelated ARIA attributes like aria-hidden.

Bootstrap 5 replaces .sr-only with aria-current="page" for indicating the current page in navigation.

4fill in blank

hard

Fill both blanks to update the Bootstrap 4 grid classes to Bootstrap 5 syntax.

Bootsrap

<div class="row">
  <div class="col-[1]-6 col-[2]-4">
    Content
  </div>
</div>

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

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent breakpoint names like 'mdm' or 'xlx'.

Mixing up the order of breakpoints.

Bootstrap 5 keeps the grid breakpoint names from Bootstrap 4: sm, md, lg, xl. Here, col-sm-6 and col-lg-4 are common responsive classes.

5fill in blank

hard

Fill the blanks to convert Bootstrap 4 button classes to Bootstrap 5 equivalents.

Bootsrap

<button type="button" class="btn btn-[1] btn-[2]">
  Click me
</button>

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

Aprimary

Blg

Coutline-primary

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using btn-primary instead of btn-outline-primary for outlined style.

Mixing size classes or omitting them.

Bootstrap 5 uses btn-outline-primary for outlined buttons. The size classes btn-lg and btn-sm remain the same.

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