Skip to main content

News

What’s New with Sitecore’s Bootstrap 5 Grid

Learning from collaboration

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

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Steven Craft

Steven is a Solutions Architect with Perficient. He works primarily with Sitecore and .NET but enjoys front-end development using modern JavaScript frameworks like Vue and Next.js and cloud platforms like Azure. When he’s not working with today’s latest technologies, Steven enjoys BJJ, riding his motorcycle, and spending time with his 4 exceptional children.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram