Skip to content

Upgrading bootstrap 3 to 4

Breaking3.4.1 → 4.6.2Breaking7Security5Platform4Deprecated5New36Changed60Fixed87Other143

Full comparisonBack to bootstrap
BreakingUpgrade verdict

7 breaking changes and 4 platform requirement changes and 5 security fixes.

In plain terms
  • Removes aria-haspopup from dropdowns.
  • Rows no longer stretch to full width by default, so they may shrink. Add the flex-fill class to a row to get the old behavior back.
  • Bootstrap no longer relies on the separate Normalize.css library; its normalization styles are now built in.
  • Navbars now work mobile first, use a new class name, and no longer have toggler position modifier classes.
Must act Top 5 of 21 that need code or config changes

What you must change

Breaking7
Removes aria-haspopup from dropdowns.
aria-haspopupdropdown
4.6.1GitHub ReleaseSummarizedView source
Removes flex: 1 0 100% from .row, so rows can shrink; apply .flex-fill to the .row to keep previous behavior.
.row.flex-fill
4.5.2GitHub ReleaseSummarizedView source
Drops Normalize.css as a dependency, forking parts of it and remixing with Reboot for a more stable normalization approach.
Reboot
4.0.0-betaGitHub ReleaseSummarizedView source
Updates navbar responsive behaviors to mobile first, replaces .navbar-toggleable with .navbar-expand, and removes toggler position modifiers.
.navbar-expand.navbar-toggleable
4.0.0-betaGitHub ReleaseSummarizedView source
Drops grid push, pull, and offset in favor of new .order- modifiers and margin utilities.
.order-
4.0.0-betaGitHub ReleaseSummarizedView source
Renames many variables for a more consistent naming scheme.
4.0.0-betaGitHub ReleaseSummarizedView source
Renames flexbox order utilities to better match the .property-value utility naming scheme.
4.0.0-betaGitHub ReleaseSummarizedView source
Security5
Fixes an XSS vulnerability (CVE-2019-8331) in the tooltip and popover plugins by implementing a new HTML sanitizer.
tooltippopoverModerate · CVSS 6.1
4.3.1GitHub ReleaseSummarizedView source
Fixes an XSS vulnerability in the tooltip, collapse, and scrollspy plugins.
tooltipcollapsescrollspy
4.1.2GitHub ReleaseSummarizedView source
Bootstrap vulnerable to Cross-Site Scripting (XSS)
Moderate · CVSS 6.1
4.1.2GitHub AdvisoryOriginalView source
Bootstrap Cross-site Scripting vulnerability
Moderate · CVSS 6.1
4.1.2GitHub AdvisoryOriginalView source
Bootstrap Cross-site Scripting vulnerability
Moderate · CVSS 6.1
4.1.2GitHub AdvisoryOriginalView source
Platform4
Drops Node 10 and adds Node 16 for JS tests, updates docs JS assets, and adds vertical-align variables for spinners.
vertical-align
4.6.1GitHub ReleaseSummarizedView source
Updates to jQuery v3.5.1 and Jekyll v4, and drops Node.js versions below 10 for development.
jQueryJekyllNode.js
4.5.0GitHub ReleaseSummarizedView source
Drops support for Node.js versions below 10.
Node.js
4.5.0GitHub ReleaseSummarizedView source
Moves jQuery and Popper to peerDependencies as they are not required for every part of Bootstrap.
jQueryPopperpeerDependencies
4.0.0-betaGitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated5
Restores the make-container-max-widths mixin for the rest of v4 and adds a deprecation notice.
make-container-max-widths
4.5.2GitHub ReleaseSummarizedView source
Deprecates the bg-gradient-variant mixin because it is being removed in v5.
bg-gradient-variant
4.5.0GitHub ReleaseSummarizedView source
Deprecates the bg-gradient-variant mixin.
bg-gradient-variant
4.5.0GitHub ReleaseSummarizedView source
Deprecates the bg-variant(), nav-divider(), and form-control-focus() mixins, which are going away in v5.
bg-variant()nav-divider()form-control-focus()
4.4.0GitHub ReleaseSummarizedView source
Deprecates .text-hide, which now emits a compilation warning, as it is a dated and undocumented feature.
.text-hide
4.1.0GitHub ReleaseSummarizedView source