What’s New in Bootstrap 5 Alpha
Bootstrap is a CSS framework that makes responsive web and mobile development fast and easy. Bootstrap provides you with HTML and CSS based templates for forms, typography, tables, buttons, modals, navigation, image carousels and more. In this article, we will explore the latest Bootstrap 5 alpha version.
Modified grid system
The grid system is one of the main attractions of Bootstrap. This system is made more capable in Bootstrap 5 alpha version. It comes with an extra extra large grid (xxl). This version has .g* utilities in the place of .gutter classes. You will also find Vertical spacing classes.
Let’s see an example.
As you can see in the image, g-4 is spacing of 20px (1.5rem) from all side. You can also use .gy* and .gx* to give it specifically for horizontal and vertical.
.gy* is for vertical gutter spacing
.gx* is for horizontal gutter spacing
Columns are not position:relative by default anymore. The new grid system has replaced form layout options. Bootstrap 5 alpha container comes with 6 breaking points.
Xs <= 576px
Sm >= 576px
Md >= 768px
Lg >= 992px
Xl >= 1200px
Xxl >= 1440px
The grid system is greatly enhanced.
Updated forms
The Forms Section is a separate section in Bootstrap 5 alpha. All form controls are redesigned and deduped. Form controls are now fully custom. Every radio, checkbox, file, select, range etc come with a custom appearance. You can unify the behaviour and style of form controls across browsers and operating systems.
Customizing docs
Many libraries have been created based on Bootstrap. The latest version provides more support to extend Bootstrap, thanks to the new Customization Section. This section comes with more code snippets and content to build on top of source Sass files of Bootstrap. You also get an npm starter project.
CSS custom properties
Before Bootstrap 5 alpha, a limited set of root variables for fonts and colours had CSS custom properties. In the Bootstrap 5 version, you get them in components and layout options also.
No More jQuery
The largest change in the latest version is no jQuery. It is replaced with Vanilla JavaScript.
Responsive Font Size
Font size and margin padding are automatically adjusted across device and viewport sizes.
Eg: .class {
Padding : rfs(2rem);
}
It no longer supports Internet Explorer. There are many new icons added to Boostrap 5. However, you will not find any social media icons.Following are the classes removed and added:
Classes Added:
- row-cols-auto
- g-*
- gy-*
- gx-*
Classes Removed
- Form-row
- Card-deck
- Form-inline
- List line
The latest version of Bootstrap 5 brings utilities API: