Use App Structure to audit
Select representative components and note any outdated classes/utilities you see in Properties.
Bootstrap 4 → 5 Migration
Migrate from Bootstrap 4 to 5: review key differences, update components, and follow a safe migration order.
Migration sandbox
Section titled “Migration sandbox”We’ll start from a small set of representative components so you can practice auditing Structure and Properties for Bootstrap 4 → 5 changes.
Components preview
Section titled “Components preview”A representative set of components is loaded so we can focus on class and utility changes.
tip: Use this as a safe sandbox to practice identifying markup and class changes.
Work in small batches
Fix one component pattern at a time (e.g. navbars, forms), then repeat across pages.
How to use this tour
Section titled “How to use this tour”This tour is about auditing and updating: select components in Structure, then use Properties to replace outdated utilities/classes.
tip: Start with one representative page, apply your fixes/patterns, then repeat across the rest of your project.
Audit → Replace → Verify
Identify an outdated class, replace it with the Bootstrap 5 equivalent, then re-check visuals across breakpoints.
Prefer predictable changes
Start with layout/utilities first, then move to JS components (modals/offcanvas).
Convert Bootstrap 4 → 5
Section titled “Convert Bootstrap 4 → 5”Migrating from Bootstrap 4 to 5 usually means reviewing components, utilities, and class changes across pages.
Migration Mindset
Section titled “Migration Mindset”Start with the migration mindset before you touch any individual component setting. Moving from Bootstrap 4 to 5 is easier when you think in terms of renamed classes, changed dependencies, and behavior differences, because that mental model helps you predict which parts of a page need the closest review.
important: Plan for a review pass: some class names/utilities changed and some components changed behavior. Don’t assume “it compiles” means it’s visually correct.
Aim for parity first
Get the UI looking correct and consistent before you optimize or refactor.
Watch for behavior changes
Some components look the same but behave differently once you update the JS bundle.
High-impact changes to watch for
Section titled “High-impact changes to watch for”Common Bootstrap 4 → 5 updates include:
tip: If a JS component stops working after migration, check the bundle include and the data-bs-* attributes first.
Utilities & spacing
Expect changes around gutters/spacing helpers and how utilities combine.
Forms & validation
Verify form-control / form-select usage and when you apply is-valid / is-invalid.
- Direction utilities renamed: .ml-/.mr- → .ms-/.me- and .pl-/.pr- → .ps-/.pe-
- Float/text helpers updated: .float-left/right → .float-start/end
- Data attributes renamed: data-toggle/data-target → data-bs-toggle/data-bs-target
- JavaScript plugins no longer rely on jQuery (verify you include the correct Bootstrap 5 bundle)
Audit Pages
Section titled “Audit Pages”Open key pages and select components in Structure to verify they still render and can be configured via Properties.
App Root
Section titled “App Root”Start from the App Root, then inspect child components for outdated markup and utilities.
Component to inspect
Section titled “Component to inspect”A real component under the App Root (Button, Navbar, Card, Form, etc.) is the right scope for auditing so the Properties panel shows the correct controls.
important: Don’t inspect Properties with the App Root selected—always select the component you’re auditing.
Properties Check
Section titled “Properties Check”With a component selected, inspect its classes/utilities and replace outdated Bootstrap 4 patterns with Bootstrap 5 equivalents.
tip: Prefer fixing via Properties (variants/utilities) rather than hand-editing class strings—this keeps your UI consistent and maintainable.
Wrap-up
Section titled “Wrap-up”Bootstrap 4 → 5 migration is a review process. Inspect pages and components, update utilities/classes, and verify behavior (especially for JS components like Modals and Offcanvas).
Suggested migration order
Section titled “Suggested migration order”Use this order to keep changes isolated and testable as you migrate.
Keep the migration deterministic
Work in a consistent order so you can test each layer before moving on (layout → navigation → components → forms → JS).
Layout + grid first
Navigation next
Core components (buttons, cards, alerts)
Forms + validation states
JS components (modals, offcanvas, tooltips)
Next steps
Section titled “Next steps”Jump into a focused tour for the area you’re reviewing, or return to the Bootstrap tours index.