Bootstrap is a free, powerful, and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates. Bootstrap framework is responsible for many revolutionary changes in UI and UX engineering by providing smooth and customized designs. Alpha1 version of Bootstrap 5 was officially released on 16, June 2020. If you are familiar with later versions of bootstrap, definitely you should be excited to taste the freshly cooked version of bootstrap. Without wasting much time, let’s see what we can expect from the new version.

_“A reader lives a thousand lives before he dies, said Jojen. The man who never reads lives only one.” ― _George R.R. Martin

Major changes in Bootstrap 5 alpha1

Bootstrap have their own SVG Icon library

This version adds around 300 new glyphs. Not only that. Bootstrap has fixed issues with the existing icons. So you don’t have to use something like font awesome or material icons. You can use bootstrap icons which are SVG’s. So they scale quickly and easily. Also one of the key features of this change is, bootstrap have updated their icon processing scripts.

No more JQuery

The best part of all bootstrap v5 is, no more jQuery and no more dependency on the jQuery library. You only need the bootstrap JavaScript file for development purposes. But still, Popper JavaScript is used. In addition to that, they have made changes and enhancements to JavaScript. We can think that, not having to include jQuery will save the file size of projects. It seems that they’re trying to make version 5, a very future-friendly framework for developers.

Dropped support for Internet Explorer

One of the reasons for dropping internet explorer is, to get the support of CSS custom variables. Previously, there were only a few route variables for colors, fonts etc; in version 4. But now they’ve added a bunch of components and layout options which are indeed good approaches.

Adding CSS custom properties

Since the drop of internet explorer, now developers can use CSS custom properties in bootstrap 5. Consider the example given below by bootstrap guide for the .table component. They have added local variables to make styling easier.

.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};
}

An enhanced grid system(change of gutter width unit)

Bootstrap has developed on its existing grid system instead of replacing the previous grid system which is a cool approach. One of the changes is new sizing in the XXL gutter class has been replaced to a utility (much like the margin and padding). Also, Vertical spacing classes have been added and columns are no longer positioned relative by default. So developers can migrate their version easily from v4 to v5. They might deprecate the previous grid system in their future stable releases.

Example of grid gutter v4

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Example of grid gutter to v5

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

Forms are updated

If you just check out their forms documentation, you can see that they have overhauled docs. There is a dedicated area just for forms. They have redesigned the form controls in v4. (custom controls like radios, checks, and switches). One of the major changes I saw was that, they have used input-group instead of_ from-group._

Example of form v4

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another</label>
    <input type="text" class="form-control"         id="formGroupExampleInput2" placeholder="Another">
  </div>
</form>

Example of form v5

<div class="input-group mb-3">
  <span class="input-group-text">Example</span>
  <input type="text" class="form-control" aria-label="Example">
</div>

<div class="input-group">
  <span class="input-group-text">Another</span>
  <input type="text" class="form-control" aria-label="Another">
</div>

#front-end-development #bootstrap-5 #new-features #programming #startup #bootstrap