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 removes jQuery
Bootstrap 5 removes jQuery

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鈥檛 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鈥檚 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鈥檚 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.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...