Bootstrap 5 alpha is Here.
What is Bootstrap?
Initially, after launching Bootstrap, they launched its 2nd version after 2 years, and then version 3 after a year of launching V2. However, it took them 5 long years to introduce version 4. And now the alpha version of the much-awaited Bootstrap 5 framework was released on 16th June 2020.
Major changes included with the Bootstrap 5 alpha framework:
- Bootstrap 5 alpha no longer depends on jQuery
- CSS custom properties added
- Switched from Jekyll to Hugo
- IE 10 and 11 support removed
- Custom set of SVG Icons added
- Improved customizing docs
Bootstrap 5 alpha no longer depends on jQuery
CSS custom properties added
In v4 they only included a handful of root variables for color and fonts, and now they added them for a handful of components and layout options. Take for example our .table component, where they have added a handful of local variables to make striped, hoverable, and active table styles easier :
// Styles here...
Enhanced Utilities API
They implemented a brand new utility API into Bootstrap 5.
$utilities: () !default;
values: map-merge($spacers, (auto: auto))
API based approach, they created a language and syntax in Sass to create our own utilities on the fly while also being able to modify or remove.
Better Grid System
- The team added a new grid tier! Say hello to XXL.
- .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities.
- Form layout options have been replaced with the new grid system.
- Vertical spacing classes have been added.
- Columns are no longer position: relative by default.
- Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
example of how to use the new grid gutter classes:
<div class="row g-5">
Switched from Jekyll to Hugo
Jekyll is a website generator that’s designed for building minimal, static blogs with easy-to-use navigation and website components. However, Bootstrap 5 switched to Hugo as it is described as a fast and flexible static site generator. It is written in Go language which makes it fast, easy to use, and configure. Almost all features are identical to Jekyll, however, Hugo has great integration with the popular web host and can also organize your content with any URL structure.
Responsive font sizes
If we want to maintain the readability of the page on smaller screens, we need to decrease the font size, as well as most other elements (images, buttons, etc.). Bootstrap 5 will enable responsive font sizes by default. Now, it will be easier to resize the typography components according to the user’s viewport through the Responsive Font Sizes or RFS engine.
Deleted classes : .font-size-sm, .font-size-base, .font-size-lg, .font-size-xl
New utility : .text-sm, .text-base, .text-lg, .text-xl
IE 10 and 11 support removed
The new version of bootstrap has dropped the support of Internet Explorer v-10 and v-11 which was earlier in Bootstrap version 4.Inorder to encourage web designers and developers to focus more on designing modern web pages rather than having to worry about breaking any piece of codes on old browsers.
Custom set of SVG Icons added
For Bootstrap 5, they introduced a brand new SVG icon library crafted brilliantly by Mark Otto, co-founder of Bootstrap. They scale quickly and easily and can be styled with CSS. They're open-sourced (MIT), so you're free to download, use, and extend.
Improved customizing docs
They expanded the theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. They also expanded the color palette in v5.
Extensive color system built-in for a more customized look and feel without ever leaving the codebase.
Created a new Forms section (including the input group component). With v5, they have gone fully custom.
With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements which give a more consistent look and feel.
<input class="form-check-input" type="checkbox" value="” id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
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.
The new Bootstrap 5 makes the framework lightweight, simple, useful, and faster for the developer’s benefit. They are having ready-made designs, coded templates, and themes for projects. Spawoz technologies can help you get the best in industry to benefit your business.