Transitioning from Bootstrap 4 to Bootstrap 5: Key Changes and Examples

Bootstrap, a popular open-source CSS framework, has evolved through several versions, with its latest iteration, Bootstrap 5, offering a variety of changes and improvements over its predecessor, Bootstrap 4. This article will discuss some of the key changes to consider when converting from Bootstrap 4 to Bootstrap 5, while retaining the old classes alongside the new ones for a smoother transition.

1. jQuery Removal

One of the most significant changes in Bootstrap 5 is the removal of jQuery as a dependency. Bootstrap now relies on Vanilla JavaScript, providing better performance and a smaller project size. However, you can still add jQuery to your project if needed.

Example:

Old (Bootstrap 4):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

New (Bootstrap 5):

No jQuery script tag required, as it is no longer a dependency.

2. Updated Grid System

Bootstrap 5 introduces an updated grid system with new container classes, and improved gutter handling. The new container classes are .container, .container-sm, .container-md, .container-lg, .container-xl, and .container-xxl. Also, gutters are now managed with CSS variables, and can be customized easily.

Example:

Old (Bootstrap 4):

<div class="container-fluid">

New (Bootstrap 5):

<div class="container-fluid container-xxl">

3. Navbar Changes

The navigation bar has undergone several changes, including class name modifications and adjustments to responsive behavior. The .navbar-expand-* classes have been replaced with .navbar-expand, .navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg, and .navbar-expand-xl.

Example:

Old (Bootstrap 4):

<nav class="navbar navbar-expand-lg">

New (Bootstrap 5):

<nav class="navbar navbar-expand-lg navbar-expand">

4. Form Updates

Bootstrap 5 introduces new form layout options and class changes. The .form-group class has been removed, and form control classes have been updated to .form-control and .form-select. The custom form controls have also been replaced with new, more streamlined classes.

Example:

Old (Bootstrap 4):

<div class="form-group">
<select class="custom-select">

New (Bootstrap 5):

<div>
<select class="form-select">

5. Utility Class Additions

Bootstrap 5 brings new utility classes for margin, padding, flex, and position, while also deprecating some older ones. For example, the old .ml-* and .mr-* classes for horizontal margins have been replaced with the new .ms-* and .me-* classes, respectively.

Example:

Old (Bootstrap 4):

<div class="ml-auto">

New (Bootstrap 5):

<div class="ml-auto ms-auto">

6. Custom Checkbox and Radio Replacement

Bootstrap 5 introduces changes to custom checkboxes and radio buttons. The old custom styles have been replaced by the new `.form-check` class.

Example:

Old (Bootstrap 4):

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

New (Bootstrap 5):

<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck1">
<label class="form-check-label" for="customCheck1">Check this custom checkbox</label>
</div>

Conclusion

Transitioning from Bootstrap 4 to Bootstrap 5 might seem daunting at first, but understanding the key changes will help make the process smoother. By retaining the old classes alongside the new ones during the conversion, you can minimize potential issues and ensure a seamless upgrade experience.