A very big news for all the front-end developers that Bootstrap 5 has officially launched its 5th version, it is one of the most awaited version of bootstrap. An announcement comes that this version will come by the end of 2019, but then we heard in the beginning of the 2020. However, they finally released their alpha one on 16th June, 2020.
Introduction:
Bootstrap 5 is one of the most powerful tool for developing responsive layouts. It is also the number one widely used CSS framework with 142,000 stars on Github.
There are so many other CSS frameworks are available. We have Semantic-UI, Foundation, Materialize, Material UI, etc. but the popularity of Bootstrap is amazingly unmatched. These all above mentioned frameworks are not the half of Bootstrap as compared to the stars on Github.
This new version arrived with a new awesome looking logo. It seems that previous logo is wrap around a curly braces, which gives it really a new look.
Whats New?
I haven’t found any major change in this new this version except that they have exclude JQuery and drops the support for Internet Explorer (IE).
- The idea of removing JQuery is to make an application more lighter and less in file size but bootstrap.js and popper.js is still available to enable JavaScript functionality in our applications.
- Secondly, the idea of dropping the support for IE 10/11 because they have introduced root variables for color and fonts which is no more supported by the earlier version of IE.
There are so many other changes, as usual for making the improvement by keeping an eye on the new challenges faced by the developers.
Improved documentation: They have switched to Hugo from Jekyll. There are some serious issues with Jekyll that, they required Ruby and site generation is very slow. Whereas, Hugo has GO language, and they are very fast.
Enhanced Grid System: The have added more classes for vertical spacing, form layouts, replacing (.gutter) spacing with (.g*) for more options. In V4. We have maximum XL (extra large) break point which is for screens less than 1200 pixels. In version 5, we have XXL (extra extra large) with a break point on screens less than 1400 pixels.
Updated forms: Form controls are fully redesigned. They have enabled more customization possible for the users, especially for toggle, checkbox and radio buttons.
Responsive Font Sizes: Measurement units for font sizes are now replaced with rem for responsive typography across multiple view ports.
More Color Palette: The new version comes with more new colors.
Icon Are Back: In v3, we have a list of useful icons, but later in v4, there were no default icons, but now they are back with SVG icon library.
Getting Started
After removing JQuery, we still need to include popper.min.js and bootstrap.min.js with bootstrap CSS.
Cascade Style Sheet – CSS
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css” />
JavaScript and Dependencies
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js”></script>
Conclusion
With no doubt, this version is really a game changer for many developers. Now they are capable of developing more powerful layouts for their applications. They have much ease and flexibility in their coding style.
This is definitely the alpha version, not fully stable, and there will a lot more to come. Bootstrap version 5 alpha 2 might released with initial fixes in the next 3-4 weeks.
One Response to Bootstrap 5 alpha Released | Whats New?