15 Things Nobody Told You About Bootstrap 5

0
209
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.

1Is 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. ūüź¶¬†ūüź¶¬†

2Implementation 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. ūüź¶ūüź¶

3Bootstrap 5 deprecate IE10 support.

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

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

BS5 deprecates the Old Browser Support.

4Use 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);
}

5Functions 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 */
  }
}

6Remove 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

7Jasmine 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.

8Full-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>

9Set 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.

10Changes 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.

11More 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.

12Better 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...

13Navbar 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.

14Remove 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.

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

15Removal 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

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