Bootstrap is a free open-source CSS framework for front-end development. It is one of the most popular development tools in the web designer community. All are waiting for the new version of bootstrap. When bootstrap 5 is released.
The fundamental concept of bootstrap, grid layout, responsive content of HTML-CSS-based components will probably have no change. Nevertheless, some of the things possibly change such as jQuery and the library.
This time bootstrap 5 releases in a different version.
- Bootstrap 5 Alpha version released on June 16, 2020.
- Bootstrap 5 Alpha 2 version released on September 29, 2020.
- A Bootstrap 5 Alpha 3 version released on November 11, 2020.
- Bootstrap 5 Beta version released on December 7, 2020.
- Bootstrap 5 Beta 2 version released on February 10, 2021.
- A Bootstrap 5 Beta 3 version released on March 22, 2021.
Now, let’s find out the update of each Bootstrap 5 versions:
Bootstrap 5 Alpha version
This is the first version of Bootstrap5. So, we expect more changes.
Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer.
A highlight of the Alpha version:
New look and feel
In bootstrap5 we introduce a brand-new logo of bootstrap. but suffice to say we wanted to give the ol’ B in a rounded square a small upgrade.
The docs page now no more full width to improve readability and the device support it looks like an app. In advance, we upgrade the sidebar section to expandable.
jQuery is a fast, small, and feature-rich js library. It makes things like HTML document traversal and manipulation even handling animation of ajax much similar to an easy-to-use API that works across a multitude of browsers.
Thanks to advancement made in front-end development tools and browser support, we’re now able to drop jQuery as a dependency
CSS custom property
In bootstrap 5 using CSS custom properties in Bootstrap 5 thanks to dropping support for Internet Explorer. In v4 we only included a handful of root variables for color and fonts, and now we’ve added them for a handful of components and layout options.
Improve customizing docs
In Bootstrap V5 documentation improved; giving more explanation, removing ambiguity, and providing much more support for extending Bootstrap. It Includes a whole new Customize section.
In addition to the new Customize section, we’ve overhauled our Forms documentation and components. We’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.
We are curious that how to build new and interesting CSS libraries and toolkit, it’s challenging to build on the web for the last decade. We have a brand-new utility API in bootstrap5.
$utilities: () !default; $utilities: map-merge( ( // ... "width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), // ... "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), // ... ), $utilities);
Enhanced grid system
In bootstrap 5 grid system is completely different. We have modified the existing grid system instead of replacing it with a completely new.
Here are some of the major changes in the Grid system.
- Added a new grid tier.
- .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. It also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
- Form layout options have been replaced with the new grid system.
- Vertical spacing classes have been added.
- Columns are no longer position: relative by default.
Here’s a quick example of how to use the new grid gutter classes:
<div class="row g-5"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div>
Bootstrap 5 Alpha 2 version
The alpha version comes with a new update:
Updated docs nav
Navigation in docs to make things easier to use. In new version redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets.
In a new version redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets. The subnav has also be streamlined to take up a single horizontal bad on mobile, giving more space for documentation. We’ve also differentiated the expanding and collapsing menu icons between the two navs.
Add .carousel-dark to any .carousel to switch from the default white text, controls, and indicators to black.
Values are configurable via Sass variables. To save on file size, we’re using a CSS filter to invert out SVGs for the carouse controls.
Dark is now on-trend, and bootstrap 5 latest version did not ignore it.
Add .dropdown-menu-dark to any dropdown menu to change the appearance. Dark dropdowns are opt-in, so you’ll need to add the class as you go.
Redesign close button
Our close button has been renamed, redesigned, a new focus state, and a new color option.
In a new version includes position elements with a new top, right, bottom, and left utilities with support for 0, 50%, and 100% by default.
Bootstrap 5 Alpha 3 version
Bootstrap 5 improved a handful of components in this release and even dropped one for some new and improved utilities.
The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability.
Comes with a new Block button
Block buttons are no more in v5—we’ve dropped the .btn-block class for .d-grid and .gap-* utilities. This allows for the same behavior and style, but with much greater control over spacing, alignment, and even responsive layout options.
There are 3 important changes in SaaS source file:
- Switched to Dart Sass with LibSass being deprecated.
- The color system which worked with color-level() and $theme-color-interval was removed in favor of a new color system. All lighten() and darken() functions in our codebase are replaced by tint-color() and shade-color().
- Added a Sass variable for CSS custom property prefixes.
Forms come with exciting changes such as floating labels as a fully-fledged form layout option and a new file input.
Floating labels include support for textual inputs, selects, and textures. We have one limitation with textareas where multiple lines of text can be obscured by the floating label.
Bootstrap 5 Beta version
The first beta version release with breaking changes. Let’s light up features:
In the latest version comes with RTL Support. It includes:
- New RTL versions of our CSS dist file, which includes our grid, Reboot, utilities, and standard bundles. See the Contents page for a full list of files.
- New RTL documentation to help you get started.
- Five new RTL Examples that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all-new right-to-left equivalents.
- Two new cheatsheet kitchen sink pages—the default cheatsheet for our standard CSS and the RTL cheatsheet.
Renamed classes for logical properties
In a beta version have renamed several classes and variables. It’s a risky change because of the size and impact of the change.
Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like left and right in favor start and end. Things like align-items-end have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.
In a beta version upgraded Popper.js v1 to v2. Popper.js v2 also comes with smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.
- Created a new base component to share logic across our components.
- Migrate to more modern APIs across our plugins.
- Tooltips and popovers can now have custom classes.
- Don’t hide modal when config. the keyboard is false.
Bootstrap 5 Beta 2 version
In a beta 2 comes with some awesome update:
Color utility docs
We added color utility documentation, separating the text color classes from our background-color ones. We’ve also made extensive use of our scss-docs shortcode to include tons more code snippets in docs.
- Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
- Restored the offset option for dropdowns.
- Fixed modal toggling when clicking on data-bs-toggle=”modal”.
- Build our base component as a separate .js file.
- Prevent getSelector from returning URLs as a selector which caused errors in the dropdown and scrollspy plugins.
- Refactored components to use a utility function to define jQuery plugins
Bootstrap 5 Beta 3 version
The Beta 3 version release with breaking changes. This is a stable version which fixes all previous version changes. Let’s light up features:
New offcanvas component
New and refreshed examples
In a new version added four new snippets for headers, heroes, features, and sidebars. These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.
Improved SaaS docs
Bootstrap beta 3 added a new section to nearly every component and utility documentation page for the source Sass code. Where appropriate, we now list Sass variables, maps, loops, and animation keyframes. These are directly linked from our source files, so whenever we ship new code, they’ll automatically be up-to-date.
In a conclusion, a new version comes with new updates. We expect a new version that comes with new changes.
For More Article: Click Here