What’s new in Bootstrap 5 Alpha version

Bootstrap 5 Alpha version

Most popular Open source framework set to launch its a new version. Yes, your assumption is right, Bootstrap is ready to launch its new version Bootstrap5. You can expect major change and improvement in the latest version of bootstrap 5. It takes a long time after the release of bootstrap 4. The Bootstrap 5 Alpha version released and the beta version in the testing phase.

Let’s explore the bootstrap 5 alpha version and know what’s new in the latest version.

1) New look and feel

In a 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.

bootstrap

Our 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.

bootstrap

2)  No more jQuery

jquery

The most essential feature of bootstrap is jQuery. It’s has been shocking bootstrap 5 is free of jQuery. bootstrap would be easy to integrate with a JavaScript-based framework which means it removes the largest side client dependency. This is one of the major changes in bootstrap. Although this change was sure to be out, many developers do not happy with it the reason is that jQuery is one of the powerful platforms for cross-browser code.

Note:  A simple jQuery replaced by vanilla jQuery. This will help to integrate with more is a framework, but if the user still wants to use jQuery, they can use it.

 

3) Dropping IE10 and IE11 support

dropping

We can see that bootstrap removes Internet Explorer (IE) support day by day. Earlier in bootstrap 4 IE8, IE9, and iOS 6 support removed. In the latest circulation in bootstrap 5 IE10 and IE11 support dropped.

 

4) A custom SVG icon library

customsvg

In bootstrap 5 it’s disappointed with the lack of an integrated icon library in bootstrap. It’s exploring its own scalable vector graphics library.

It seems like changes in bootstrap5 SVG library with bootstrap 5.

  • Dropping Qunit
  • A large No of alteration in JS
  • Development of testing infrastructure in Jasmin
  • No more support for NODE.js 8
  • Changes in Dev dependency
  • A few changes in CSS & components like a responsive sticky top

 

5) CSS custom properties

After removing the support for Internet Explore, we have started using CSS custom properties in bootstrap5. In bootstrap 5 supported custom changes of root variable for color and font.

There are some changes in .table :

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

6) Switching to Hugo from Jekyll

hugo

Hugo is the world’s fastest static site generator. Whereas Jekyll is the world’s oldest static site generator and it’s dropped in bootstrap 5. We see this change similar to what they did with the 4th version. Removing powerful LESS features to SAAS.

 

7) Bootstrap column and rows

Bootstrap 5 concept offered 12- column system is also part of it. It is row and column provide the most effective solution to the issue of different screen sizes. In the recent bootstrap version, the development is focused mostly on improving performance and reduce loading time.

 

8) Responsive container

Bootstrap will new sort of PF contain likes ‘.container-sm’,’.conatiner-md’ and more. The only available option is regular and container-fluid.

ESM version

Bootstrap could be used as a module with the introduction of its ESM version. ESM version which allows using it as module script:

<script type=” module”>

Import {Toast} from

‘bootstrap.esm.min.js’

array from (document.querySelectAll(‘.toast’))

.foreach (toastNode=> new Toast (toastNode))

</script>

 

9) Updated forms

In addition to the new Customize section, we’ve overhauled our Forms documentation and components.

form

 

10) Improved bootstrap branch for development

According to the official announcement of the website, in order to develop v5, they will cut a new master branch from v4-dev.

 

11) Responsive font size

It is challenging for the developer to look at goods on various platforms and devices. To solve this problem typography is available to control the appearance of the font. But the con is the same typography used by many websites so uniqueness factor removes. Bootstrap support custom font now it enables font size by default. So, it’s easy to modify typography components according to user requirements.

 

12) Utilities API

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);

13) Enhanced grid system

In bootstrap 5 grid system is completely different. We have modified the existing grid system instead of replacing it with completely new.

Here are some of the major changes in the Grid system.

  • We’ve added a new grid tier! Say hello to xxl.
  • .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. We’ve 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.

Example of new grid gutter classes:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

14) Refreshed website

Bootstrap 5 website hosted on GitHub, pages with help of Jekyll. Bootstrap 5 will be hosted on netlify which provides more advanced options than GitHub pages. Also, instead of Jekyll new version include Hugo. The website is silently refreshed.

 

Conclusion

Bootstrap 5 alpha version comes with significant modification. The most significant change is ‘No jQuery’. All the features and details are revealed till now but we may we seen changes in the beta version. we expect some of the surprise features.

 

Read more article: Click Here