Bootstrap 5-alpha has arrived!

Bootstrap 5 alpha has arrived and it arrived with many good updates. I’m a bootstrap lover and I have made most of my websites and web applications with bootstrap for the structuring of my projects. The seamless UI and grid system that bootstrap has provided in these years was the major thing that I have loved about bootstrap to create any website.

Note: Bootstrap 5 is still in the alpha phase so there will be some breaking changes until the first beta release is out.

 Summary 

Bootstrap 5 has dropped jQuery and written plugins with plain javascript and plugins such as buttons are not completely working with HTML and CSS support for toggles and all toggles are now supported by checkboxes and radios which makes it more reliable. Internet Explorer 10 & 11 support is dropped.

 Updates of Bootstrap 5 

• NO JQUERY – Yes you have read it right. Bootstrap has removed jQuery as the dependency which makes bootstrap lighter on file size and page load. While dropping jQuery, bootstrap 5 comes with more changes and enhancements in javascript for v5 that focus on code quality and bridging the gap between v4 and v5. Also now buttons have native HTML and CSS support to toggle states which do not need jQuery or JS anymore and toggles are now handled by checkboxes and radio buttons which makes it more reliable.
• IE 10 & 11 support dropped – Bootstrap 5 has now dropped support for IE 10 and 11
• Custom Properties – v5 begun CSS custom properties which came possible due to dropped support of Internet Explorer. In bootstrap 4 there were a handful of root variables that were added for colors and fonts and in v5 there are additions in CSS variables for components and layout options.

• Fonts are optimized and use REM as units which makes them more responsive to UI.

• Gutters are customizable – We have seen margin and padding as utility class in bootstrap 4 where the usage was very handy like p-*, m-*, etc. which makes it flexible to use and change the layout. This same feature is available for gutters now, you can use g-* for using gutter width in grid classes

• Enhanced Grid System – We all have faced difficulties while upgrading from v3 to v4 which is taken care of in v5. Instead, there is an addition to the new grid tier which XXL. 
  • Form layout options have been replaced with the new grid system. 
  • Vertical spacing classes have been added
  • Columns are no longer position: relative in default.

• New color palettes introduced – We have now more colors added in v5 as we have in other frameworks or libraries. Bootstrap 5 has also added more colors in their bucket which seems nice to have a variety of colors to use in application from default colors, but you can always modify it as it is all SASS based and you can anytime modify/override them.

• Utilities API – This is an amazing feature that is added in bootstrap 5, I have loved this feature and I think this will help us lot in making our websites look cool with some handy methods and utility classes that we can create on our own with ease. I maybe write a complete article on how to create utilities for bootstrap. ? 

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

• Updated Forms – In v4 we have custom form controls – such as checkboxes, radios, files, switches, and more but in v5 it is fully custom. Every checkbox, radio, select, file, range, and more 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.

• Customizing Documentation Improved – Customization documentation is improved to give more explanations that remove ambiguity and provides more support for extending bootstrap. A whole new experience in docs is there to help you extend bootstrap.

 Migrating from v4 to v5 

Migrating from v4 to v5 will not be much of difference unlike from v3 to v4, most of the classes are the same and we have some additions in v5 now, jQuery is removed and all plugins have written in plain javascript now. There are some updates regarding SASS, Grid Sytems, Colors, Reboot, Typography, etc. You will get a full list of updates and migration details here https://v5.getbootstrap.com/docs/5.0/migration/

 Get Started with Bootstrap 5 

Head to https://v5.getbootstrap.com to explore the new release. Bootstrap also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.

npm i bootstrap@next

 Should you learn v4? 

This question might come to your mind that should I learn v4 as v5 is already in the alpha phase if you have started learning bootstrap. In my opinion, you can surely continue learning v4 as there will be not much of breaking changes only additions and some cool enhancements are expected to come in v5. Happy learning ?