What’s New in Bootstrap 5 Alpha

Updated: August 31

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.

code

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.

Column
Column
Column
Column

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.

settings

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:

Avatar photo

Rahul Vij

Co-founded WebSpero solutions about a decade ago. Having worked in web development- I realized the dream of transforming ideas sketched out on paper into fully functioning websites. Seeing how that affected the customers’ generation of leads and conversions, I wanted to delve deeper into the sphere of digital marketing. At Webspero Solutions, handling operations and heading the entire Digital Marketing Field – SEO, PPC, and Content are my core domains. And although we as a team have faced many challenges, we have come far learning along and excelling in this field and making a remarkable online reputation for our work. Having worked in building websites and understanding that sites are bare structures without quality content, the main focus was to branch into optimizing each website for search engines. Investing in original, quality content creation is essential to SEO success in the current search climate. Succeeding in this arena ensures the benefits of producing visitor-friendly content. Directing all our teams to zoom in on these factors has been a role that I have thoroughly enjoyed playing throughout these years. linkedin