How to get started with Bootstrap 5.0 | BitBakery Software

How to get started with Bootstrap 5.0

May 13th, 2021 by Alex Kinsella

It’d be an understatement to say we’re excited for the release of Bootstrap 5.0. Over the last few months, we’ve been working with pre-release versions and we’ve been excited at the major changes to the popular front-end open source toolkit. Here’s a rundown of our favourite new components, revamped components that we think you should know about, and other changes you need to get started with Bootstrap 5.0.

What are Bootstrap 5’s new components?

Bootstrap has some great improvements to existing components – but there are three new components that we’re really excited about. 

New offcanvas support

From building an e-commerce front end to developing a new navigation system for a website, there are always use cases where you need to bring in a menu or dialog for the user. Bootstrap 5’s new offcanvas component delivers this through a Javascript toggleable sidebar component. You can set it to appear from the bottom, left, or right of the viewport – giving you multiple levels of flexibility.

Floating labels

Even though your users fill out forms multiple times every day, providing tooltips in form fields is still needed. It respects your user’s time and helps deliver an easy to understand user experience. Bootstrap 5 introduced a new floating label for form fields. We really like how the label shrinks in size as the user navigates the fields and enters data.

Utility classes

Similar to our other favourite tool, Tailwind CSS, Bootstrap 5 supports new extended utility classes. There’s new classes for positioning, opacity, border radius, overflow, and more

Updated components

Accordion component

Out with the old, in with the new. Bootstrap 5 replaces the old .card component with the new .accordion component. It’s a great improvement with a much smoother animation look and feel.

a caption

Forms are always custom 

Another big revamp is in Bootstrap 5’s forms. In previous versions, your site would use the stock form fields based on the browser the end user was using. You could customize it to use the Bootstrap base CSS form fields or customized ones. Now with Bootstrap 5, your web applications will always use custom based on your CSS instead of the browser’s stock form fields.

The other big improvement with Bootstrap 5 forms is with layout. You don’t need to use things like .form-group, .form-row, or .form-inline anymore. Now you can just place form elements in the grid like any other component.

More Bootstrap 5 improvements

What’s next?

It’s always important to test, test, and retest anytime you’re migrating to a new version of a framework. We’re constantly testing new framework and operating system updates for our clients’s mobile and web applications to make sure there are no unexpected issues for their customers.

February 28th, 2020 by Diana Valdes
Putting the user first
November 19th, 2020 by Rachel Hickey
Top 5 things you should do to get your online store ready for Black Friday Cyber Monday
August 2nd, 2022 by Alex Kinsella
Meet the BitBakers - Daniel MacKenzie