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.

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 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.
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鈥檛 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.
In this example, we use one of Bootstrap鈥檚 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.
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.
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 widthgy-*
聽classes control the vertical/row gutter widthg-*
聽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
,聽.row
s 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.
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.
Share your thoughts