Bootstrap 5 Alpha is Now Available - Here's What's New


 • 

Technology

Internet

Bootstrap

The latest version of Bootstrap, the leading web framework, is now available!

bootstrap.png

The first alpha release of Bootstrap 5 was released on June 16, 2020. Some of these changes include:

  • Removal of jQuery from Dependencies (replaced with Vanilla JavaScript)
  • No more support for Internet Explorer
  • Improved grid system
  • Improved documentation
  • Improved modularity
  • Improved form designs
  • New responsive/scalable fonts
  • New utilities and helpers
  • Easier customization
  • New API

Why jQuery is No Longer Required

According to Mark Otto, the founder of Bootstrap:

"We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.

jQuery brought unprecedented access to complex JavaScript behaviors to millions (billions?) of people over the last decade and a half. Personally, I’m forever grateful for the empowerment and support it gave me to continue writing front-end code, learning new things, and embracing plugins from the community. Perhaps most importantly, it’s forever changed JavaScript itself, and that in itself is a monument to jQuery’s success. Thank you to every jQuery contributor and maintainer who made that possible for folks like me.

Thanks to advancement made in front-end development tools and browser support, we’re now able to drop jQuery as a dependency, but you’d never notice otherwise."

Why Internet Explorer Was Dropped

The same answer can apply here:

"We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us. [...]"

Internet Explorer, even to Microsoft, is just a compatibility solution for legacy websites at this point. I don't recommend using it, and as the section title implies, my site doesn't support it either.

Since Internet Explorer was dropped, Bootstrap can now use custom CSS properties.

Is Bootstrap 5 Ready for Production Use

Unfortunately, it is not recommended for production sites to use Bootstrap 5 yet.

"Bootstrap 5 is now in alpha—breaking changes will continue to occur until our first beta. We haven’t finished adding or removing everything, so check for open issues and pull requests as you have questions or feedback."

Will Migration from v4 to v5 Be Easy

Fortunately, there are far fewer syntax changes and better backward compatibility between v4 and v5, than there was with v3 and v4. Unless sites are still using Bootstrap 3, which came out in 2013, there shouldn't be a problem upgrading to Bootstrap 5.

What's Next?

Bootstrap 5 is still in alpha, and breaking changes are expected. Luckily my site isn't really that advanced for the most part, so it shouldn't be too bad if things break. We'll see how the development of Bootstrap 5 goes, and I'll write update posts as changes and new things come up.

Getting started with Bootstrap 5 is simple. Just add this stylesheet link to your site's before all other CSS styles/stylesheets:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

For JavaScript-based functions, just add these lines before the closing tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

More info is available from blog.getbootstrap.com.


Also on: