#1 Modified Grid System

The Bootstrap grid system has been one of the framework’s main attractions, and with the latest release, the Bootstrap team has increased its grid system capabilities

• A new extra extra large (xxl) grid tier has been added.
• .gutter classes have been replaced with .g* utilities:

• Vertical spacing classes have been added.
• Columns are no longer position: relative by default.
• Form layout options have been replaced with the new grid system.

#2 Modified Grid System

In Bootstrap 5, the Forms section has been moved out of components and presented as a separate section. Bootstrap wrote that the purpose of this move was to give form styles “the emphasis they deserve.”

They have redesigned and deduped all form controls. In previous versions, With Bootstrap 5, they’ve gone fully

• Checkbox:

• Switches:
• Similarly, there are changes in radio buttons as well. Every checkbox, radio, select, file, range, etc. includes a custom appearance to unify the style and behavior of form controls across OS and browser. These new form controls are all built on completely semantic, standard form controls. No more superfluous markup — just form controls and labels. You can find these new changes in the documentation.

#3 Customizing Docs

As I mentioned at the beginning, a large number of libraries have been created by extending Bootstrap. With version 5, Bootstrap is ready to support extending Bootstrap more than ever with the new Customization Section. This new section is expanded from the Bootstrap 4 theming page and includes more code snippets and content for building on top of Bootstrap’s source Sass files. They have also provided an npm starter project for you.

#4 CSS Custom Properties

In previous versions, CSS custom properties were only included in a limited set of root variables for colors and fonts. But with version 5, they are available in components and layout options as well. Let’s consider the example they have provided in the documentation.

In this example, the .table component is modified with a few local variables to make striped, hoverable, and active table styles easier. You can find detailed instructions on the Tables page of the documentation.

#5 No More jQuery

jQuery was something I never liked, but it was there with Bootstrap for a long period of time. Finally, they have let jQuery go

They say that this was one of the largest changes they have made to the framework. As a result, project size will be lighter than in v4 projects. In addition to that, there are few changes on the JavaScript side of the framework to enhance quality and reduce the gap between v4 and v5. A full list of JS-related changes can be found on their GitHub.

#6 Conclusion

Apart from these changes, there are a few other features and changes:

• New look and feel.
• Dropped Internet Explorer 10 and 11 support.
• Improved documentation.
• New responsive font.
• New utilities and helpers.

Bootstrap 5 is still in its alpha version and not fully stable, so I suggest you wait until they release a stable version to update your existing projects with v5. But if you like to test new things, you are most welcome to. Migration from v4 to v5 will apparently be very easy.