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’t want to use the includes, there are also two functions:
rfs-value()converts a value into aremvalue if apxvalue 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’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.
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, .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.
Navbar optimizations
- Remove redundant
display: inline-blockfrom flex children - Remove
line-height: inherit;which is the default value ofline-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