Bootstrap 5 Alpha – What’s new in it & differences from bootstrap 4

The most popular CSS framework Bootstrap has released its new version. On the date of writing this article, the latest release is Bootstrap 5 alpha. Let’s review some of its features and differences from the previous version Bootstrap 4.

I have been using Bootstrap since the beginning of my IT career and I love it. Every time a new release comes I always excited to catch up with it.

Here are some features of Bootstrap 5 alpha:

• Removed jQuery dependency and use vanilla JavaScript.

  Many JavaScript developers who use modern JavaScript framework such as Vue.js, React, Angular would be very happy to see as bootstrap 5 does not require them to add jQuery as a dependency

  Since the beginning of the Bootstrap, they have been using jQuery as a dependency to offer their cool features like dropdown, modal, carousel, menu, tooltip, popover, etc.

  Now bootstrap uses vanilla javascript to perform these tasks

  It does not mean you can not add jQuery, you can still add jQuery in your project

  However, bootstrap 5 still requires some dependencies like Popper and their own vanilla javascript dependency to perform these tasks.

• Stopped Internet Explorer 10 and 11 support

  Since Microsoft has officially shut down service on Internet Explorer and moved focus completely towards the Microsoft Edge browser.

  We don’t need to worry about anything related to internet explorer and so do bootstrap too.

  Some of the features of bootstrap 5 might not work on the Internet Explorer as they used modern JavaScript and CSS features which support only on modern browsers.

• New features and look and feel of the documentation in bootstrap 5

  They have changed the look and feel of the documentation page.

  Made the contents centered and removed the widescreen page view of the docs.

  And also made the documentation page more robust and usable by adding dropdown menus and search options.

  They have improved their documentation immensely by adding more explanation of features and removing ambiguous contents.

  

• CSS custom properties

  Bootstrap 5 has CSS custom properties which are the coolest and best of bootstrap 5.

  Since the removal of Internet Explorer support it is possible for them to add the CSS custom properties.

• Updated form controls

  They have their form design like check boxes, radio buttons, switches, etc. Now you can get the same design for checkbox, radio buttons, switches, ranges across all devices, and browsers.

• Utilities API

  in bootstrap 5

  Bootstrap 5 have added new utility api so that we can use Sass to create api or use bootstrap’s built-in APIs

• Updated grid system

  in bootstrap 5

  They have added some new features in the grid system but also keeping in mind the old bootstrap 4 so that we don’t confuse with the new system.

  They have added a new media size .xxl for extra-large screens

  .gutter class have replaced with .g*

  Form layout has been replaced with the new grid system

  Vertical spacing classes have been added

  Columns are no longer position: relative by default.

  Here is the media breakpoints of the grid system:

  // X-Small devices (portrait phones, less than 576px)
  // No media query for `xs` since this is the default in Bootstrap
  
  // Small devices (landscape phones, 576px and up)
  @media (min-width: 576px) { ... }
  
  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) { ... }
  
  // Large devices (desktops, 992px and up)
  @media (min-width: 992px) { ... }
  
  // X-Large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { ... }
  
  // XX-Large devices (larger desktops, 1400px and up)
  @media (min-width: 1400px) { ... }

   

• SVG icon support

  in bootstrap 5

  For the first time, ever bootstrap has its own icon library, where they have tons of SVG icons ready to use. They are open source, so you can download, use, and extend those icon libraries. Note: It’s not as same as font awesome, here you have to copy and paste raw SVG code of the icon in your html file.