We use cookies to ensure you get the best experience on our website. Learn more
function SetupPage()
{
global $pageDesc, $pageKeywords, $pageTitle;
$pageTitle = 'Bootstrap 4 to Bootstrap 5 Upgrade Tips';
$pageDesc = 'Tips on upgrading from Boostrap 4 to Bootstrap 5.';
$pageKeywords = 'CompuTools, Bootstrap, Bootstrap 4, Bootstrap 5';
}
Bootrap 4 to Bootstrap 5 Upgrade
I extensively use Bootstrap on web sites that I develop, and recently had to upgrade a site from Bootstrap 4 to Bootstrap 5.
This process is a bit tedious, so I thought I would document it for posterity. This is not a complete guide—just a list of changes that affected my site, but I hope this checklist will help others.
Change "form-group" to "mb-3".
Change "form-row" to "row".
Change "form-inline" to "d-flex flex-row align-items-center flex-wrap".
If using grids, remove "form-control".
Add "form-label" (everywhere?).
Change all "data-toggle" to "data-bs-toggle", and "data-target" to "data-bs-target". There are some other "data-xx" cases where you must add the "-bs" qualifier.
Change "close button "class='close'" to "class='btn-close'".
Change "text-left" and "text-right" to "text-start" and "text-end".
Change "float-left" and "float-right" to "float-start" and "float-end".