What’s New with Sitecore’s Bootstrap 5 Grid

With Sitecore 10.2, Bootstrap 5 was added as a grid system option. Previous options were Bootstrap 3, Bootstrap 4, Foundation, and Grid960. While Bootstrap 4 was the default prior to 10.2, Sitecore Bootstrap 5 is the new default grid system. Here’s what’s new with Bootstrap 5. 

Speed

One of the most exciting things about Bootstrap 5 is the performance improvements and the departure from some dependencies that impacted speed and performance. One of the biggest changes is jQuery is no longer a dependency. Ditching jQuery allows developers to leverage more modern JavaScript libraries like React or work within other frameworks like Vue.js or Next. Some of the additional features of Bootstrap

Bootstrap also dropped support for IE 10 and 11 and outdated Safari, Firefox, and Chrome versions. This impact is that Bootstrap can now support more modern CSS features like custom properties, interpolation, and functions.

Size

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

As technology takes on more and more forms in daily life, the variety of screen sizes grows to a larger number. It stands to reason that you want a grid system that can accommodate the different sizes. In Bootstrap 4, we were given 5 tiers: XS (portrait phones, less than 576px), SM (landscape phones, 576px and up), MD (tablets, 768px and up), LG (desktops, 992px and up), and XL (large desktops, 1200px and up).

In Bootstrap 5, an additional size, XXL, now represents extra-large desktop screens greater than or equal to 1400px. 

Style

The styling has also improved for basic web elements like form inputs and available color palettes.

Before Bootstrap 5, form input controls used the browser’s default styling. This resulted in a need to customize basic form controls to avoid the outdated UX browser form controls used. Now, the inputs use custom styling that provides a basic look and feel consistent across forms. They use semantic tags, and the validation messaging color palette makes them more aligned with accessibility standards.

Sitecore Bootstrap 5’s grid system is a great addition to Sitecore SXA. If I missed any features you think are especially important with this new Grid System, feel free to sound off in the comments below!