Bootstrap 5 beta2. What offers?

Differences between Bootstrap 4 and 5 beta.

by Tibor Kopca Date: 05-04-2021 CSS Bootstrap webdev web development


Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites. If you want to know what are the significant changes that come with the next version 5 which is in beta, read further.

Bootstrap 5 Beta2


Well we all know the advantages of working with Bootstrap - it helps with responsive design, we can produce our work faster and easier, and it's free. After alpha that was officially released on 16 June 2020, we now have v5.0.0-beta2 which is currently the latest version of the package (launched on 7 December 2020). There isn't an official release date of Bootstrap 5 yet but since it was expected already in year 2020, there is quite a lot of work done on the new version.

The Bootstrap team improved existing features and components, fixed some issues, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of Bootstrap tools. Let's talk about the changes in more detail, shall we?

Major changes

First you might spot the new updated logo.
bootstrap4_and_bootstrap5NewLogo


Dropdown Menu Alignment options

There were some issues before, now they are solved and we have options like dropstart, dropend, separate text and background color documentation, scrolling navbar, form updates.
Faster load is achieved by lighter file size in comparison to previous version.
 

Larger Breakpoint - Grid tier XXL

What might come handy for building responsively especially on larger screens is addition of the Extra extra large breakpoint with class xxl. We would have better control for larger devices like desktop monitors with 1400px and up.
 

Removed JQuery

You might be delighted, you might be disgusted, but the truth is the JQuerry has been dropped. After more than 8 years there is no need for this library, instead the plain vanilla Javascript is being used. We guess with less we really could do more here..
 

Bootstrap5_Jquerry

Navbar Optimization

All navbars now require a container within the navbar for the content to be responsive. This should simplify spacing requirements and remove the need for extensive CSS overrides.
Additionally, they also implemented a dark version of the dropdown menu with black background.

Custom properties

Adding modern features like CSS custom properties is possible thanks to phasing out Internet Explorer support.
All bootstrap custom properties are prefixed with bs- to avoid conflicts with other CSS.

Custom Utilities API

There is now a utility API - a Sass-based tool to generate utility classes based on Sass maps. We are now free to override or create a set of utility classes via Sass. It is also possible to use the state option to generate pseudo-class variations such as :focus or :hover .
 

Dropped IE10,11 support

Like previous versions, it continues with support of Google Chrome, FirefoxInternet ExplorerOpera, and Safari, which haven't changed. Changed however is that it drops support for IE10 and IE11. If you require Internet Explorer support, use Bootstrap 4. Older versions of Bootstrap were phasing out the previous versions of IE, but this time this Microsoft browser seems to have been banned altogether. This means that we can have more modern CSS items.

Components and Spacing

Cumbersome changes are happening in spacing.
Considering renaming some variables, utilities and mixings with some more logical names, for example left is now start and right is now end, we are not impressed with that, it means we can have a hard time to figure out what is the problem when your code isn't working due to some small change in naming.
For example CSS margin-left is now represented by class ms-5 (margin start spacer 5), padding-right is now pe.

Bootstrap5_spacer

Rewriting the grid to support columns placed outside of rows

The column classes can now be used stand-alone. Whenever they are used outside a .row , horizontal padding won’t be added.

Gutters

Some of the CSS classes are removed like form-inline but some are added - gutters for example.
Gutters are the padding between columns or rows, used to space and align content in a grid system.
The gutter width will be based on rem instead of px.
g-*, gx-*, gy-*
 

Updated forms

Forms are now in its main category and support form labels that float over your input fields.

Bootstrap5_Floating

Expanded Color Palette

They’ve updated the color system to improve color contrast and added tints and shades for every color.
Blue and pink base colors are becoming a bit darker.
Present now are different shades such as $blue-300 , etc.
Also now we have separate documentations for text color and background color.

Bootstrap5_Colors

Own Set of SVG Icons

Bootstrap Icons is a growing library and in the latest version they’ve added a custom set of SVG icons. Nowadays there are over 1300 free, high quality icons. Even more, we couldn't be happier that with the new release comes new icons alignment similar to FontAwesome.

Bootstrap5_Icons_Grid

Responsive Fonts Sizes (RFS)

RFS is a unit resizing engine that offers many possibilities to resize virtually every value for any CSS property.
It is a preprocessor or postprocessor-powered-mechanism and it automatically calculates the appropriate values  for fonts based on screen size.
Now you can have a responsive design in the form of layout but also the font size will change dynamically by default. This will be handy when we need to handle different modern devices, the fonts are now based on the user's viewport.


Removed Card Decks

Card deck class is removed in beta2 in favor of grid cards which adds more flexibility over responsive behavior.

Migrating the documentation from Jekyll to Hugo written in Go.

Further, separation from Jquery shows moving testing infrastructure from QUnit to Jasmine.

Removed Jumbotron

The Jumbotron component is removed.

Popper v2

Tooltips and popovers are powered by newer version of Popper.js.

Changes that are coming soon

  • Implementing an offcanvas menu


Changes that are being evaluated

  • Sass module system
  • Increased usage of CSS custom properties
  • Embedding SVGs in HTML instead of CSS

Bootstrap5_Icons

Migrating to v5


Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5 is possible also on their official Github repository. Until the development team will release the stable version it's better to always check the open issues or consult the migration tab directly on the Bootstrap site.
github.com - migration.md
getbootstrap/com - migration

Conclusion


Latest release, Bootstrap 5, yet in development, focuses on improving version 4’s codebase with as few major breaking changes as possible. Furthermore Bootstrap development team has announced that the next beta update might be promoted to the stable version.

Overall we're excited that this major front-end framework keeps evolving. If you haven't tried it yet, we strongly encourage you to check it out.

Image by Tibor Kopca

 
by Tibor Kopca Date: 05-04-2021 CSS Bootstrap webdev web development hits : 1386  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Related Posts

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to multiply matrices in JavaScript

It may seem strange to want to know how to multiply matrices in JavaScript. But we will see some examples where it is useful to know how to perform this…

JavaScript Formatting Date Tips

Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration