---
canonical: "https://www.jsolly.com/blog/migrating-bs4-to-bs5/"
title: "Migrating From Bootstrap 4 to 5: Refactoring for a Smooth Transition"
description: "Thinking about upgrading Bootstrap in your app? You might want to check out the breaking changes before you do!"
author: "John Solly"
published: "2022-03-15T13:37:45.000Z"
updated: "2022-03-15T13:37:45.000Z"
---

<a id="migrating-from-bootstrap-4-to-5-refactoring-for-a-smooth-transition"></a>

# Migrating From Bootstrap 4 to 5: Refactoring for a Smooth Transition

![Headshot of John Solly](https://d1d7p8ufhgz4ld.cloudfront.net/media/post_metaimgs/upgrade_0qtiEXj.png)

I've been wanting to migrate from Bootstrap 4 to Bootstrap 5. One reason for making the jump is that BS5 drops its dependency on JQuery - often the center of security issues.

I thought little of upgrading aside from swapping out CDN JS/CSS files. Upon upgrading, though, my site broke. Dropdowns stopped working, the layout got wonky.

I reverted the commit and checked Bootstrap's excellent doc on [migrating to BS5](https://getbootstrap.com/docs/5.0/migration/). BS5 introduced many breaking changes.

> Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.

After refactoring, everything works again 🤞

March 15, 2022 in [Web Dev](https://www.jsolly.com/blog/category/web-dev/)

Updated March 15, 2022