15 Things Nobody Told You About Bootstrap 5

Bootstrap is not a name it’s now a much more for developers and designers. Everyone waits for the next release which is Bootstrap 5. There are many questions are in mind about Bootstrap 5 and I am here to give you all question’s answer.

So tighten your seat belt and let’s dive in the Bootstrap 5 world.

Is Bootstrap 5 really removes jQuery?

jQuery makes things easier for HTML DOM traversal and manipulation, AJAX and event handling. It makes JavaScript much easier. But in the current scenario, With the trends of TypeScript programming like React, Angular, Vue, etc. It loses its potential.

Bootstrap 5 will completely remove jQuery. 🐦 🐦

Implementation of Responsive Font Size

Bootstrap 5 comes with RFS (Responsive Font Size) v9 implementation.

Remove: .font-size-sm, .font-size-base, .font-size-lg and .font-size-xl utilities
Add: .text-sm, .text-base, .text-lg and .text-xl utilities

Nowadays RFS can be achieve by CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

But in Bootstrap 5, The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport.

Bootstrap 5 enables responsive font sizes by default, allowing the text to scale more naturally across devices and viewport sizes. 🐦🐦

Bootstrap 5 deprecate IE10 support.

When we switch from Bootstrap 3 to 4, then there is some issue with supporting with an old browser.

[tmh_article_ads]

But in the BS5, It completely deprecates the IE10 and other old browser support.

BS5 deprecates the Old Browser Support.

Use of Mixin in BS5

The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, and padding-left. See the example below for source Sass and compiled CSS.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (max-width: 1200px) {
.title {
  font-size: 4rem;
}
}

Any other property can be passed to the rfs() mixin like this:

.selector {
  @include rfs(4rem, border-radius);
}

!important can also just be added to whatever value you want:

.selector {
   @include padding(2.5rem !important);
}

Functions use in BS5

When you don’t want to use the includes, there are also two functions:

rfs-value() converts a value into a rem value if a px value is passed, in other cases, it returns the same result.
rfs-fluid-value() returns the fluid version of value if the property needs rescaling.

See More:

Best and Most Effective Tips to Speed Up CSS Development
Most developers are constantly on the lookout for ways to...

In this example, we use one of Bootstrap’s built-in responsive breakpoint mixins to only apply styling below the lg breakpoint.

.selector {
  @include media-breakpoint-down(lg) {
     padding: rfs-fluid-value(2rem);
     font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

Remove Qunit in Bootstrap 5

QUnit is a JavaScript unit testing framework. Originally developed for testing jQuery, jQuery UI and jQuery Mobile, it is a generic framework for testing any JavaScript code. But with the removal of jQuery. It comes with another major change which is the removal of Qunit. But don’t be sad, It comes with Jasmine.

Bootstrap 5 switch from qunit to jasmine

Jasmine is an alternative of Qunit in BS5

As we already know that BS5 remove the Qunit and replaced it with Jasmine. Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework.

See More:

How to Add Android Bootstrap style widgets with Glyph Icons?
If you need the quick web design implementation that Bootstrap...

Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.

Full-Screen size modal

In the BS3 or BS4, modal is always a small window component. But not anymore, now you can be open modal in full-screen size in BS5. It adds full-screen size to Modal and Responsive variations for breakpoints.

<!-- Full screen modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen">Full screen modal</button>

<div class="modal fade bd-example-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl-fullscreen">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Set gutter width in rem instead of px

The gutter width is now 2rem instead of 30px. This way we ‘ll be able to use the spacing utilities to align things with the grid.

[tmh_article_ads]

Changes in Column padding

The col classes were extended the lead to this list of 60 selectors in v4. By using .row > *, we can simplify this a lot. This change will apply paddings to all children of .row. Specificity won’t be influenced by this change.

More control over gutter widths & vertical gutters

This PR introduces new responsive gutter classes. There are 3 types of gutter classes available:

gx-* classes control the horizontal/column gutter width
gy-* classes control the vertical/row gutter width
g-* classes control the horizontal & vertical gutter width

These gutter classes can be added to the .row and influence the negative margins on the row and the padding on the columns.

Responsive variants are also available to get control per breakpoint. With this change, we might consider ditching (or disable by default) the negative margins which increase our filesize quite a lot.

Better nesting support

In v4, .rows couldn’t be nested, once you tried to add a .row to a .col-*, the margins and paddings caused some conflicts. By removing the paddings & margins form nested rows (.row > .row), we can nest rows in a more flexible way.

See More:

Best Web Page Builder to Create a Bootstrap Image Gallery
It’s 2019 and there is a specific trend for a...

Navbar optimizations

Remove redundant display: inline-block from flex children
Remove line-height: inherit; which is the default value of line-height
Use flex shorthand
Improve background shorthand
Fix removed the brand margin caused by requiring containers in navbars.

Remove global `box-sizing` reset from `bootstrap-grid.css`

In bootstrap-grid.css, box-sizing was inherited which introduces this issue: #22872. On the other hand, setting the global box-sizing behavior can introduce unexpected behavior for custom CSS.

[tmh_article_ads]

By only adding box-sizing to the columns, we only apply the box-sizing to the elements where it’s needed.

Removal of `.form-inline`

.form-inline is removed in favor of the more flexible grid. The children can now be wrapped in .col-md-auto divs when needed. With the gutter classes, we can have easier control over the vertical spacing instead of using the responsive margin utilities.

When will the Bootstrap 5 release date?

Bootstrap 5 is likely to be released sometime in May 2020. Let’s wait and keep digging for more related pieces of information.