Last Updated:

What's new in Bootstrap 5?

Welcome to my blog! In this article we will talk about probably the most popular HTML/CSS framework in the world, Bootstrap. The fact is that the developers have released a new version of Bootstrap 5, which is somewhat different from the 4th. The first alpha version was released on June 15, 2020. But there has not yet been a stable release and at the time of writing this article it is version v5.0.0-beta2.

Table of Contents

In general, for those who do not know what Bootstrap is, I have already written an article on this topic, where I reviewed the 3rd version of this framework. A lot has changed at Bootstrap since then.

I try to keep up with the times and as soon as I learned about the release of a new version, I immediately decided to try it in practice. At first, I did not see any significant changes for myself, but I decided to try and make one project on a new version. Just in the course of the layout I discovered some of the charms of the new version v.5.

And so let's go through the main innovations in Bootstrap.

1. New look and feel

To begin with, the appearance of the homepage site with documentation and the Bootstrap logo has been slightly changed. The width of the content now does not stretch in full screen, but has a fixed width. This makes it easier to perceive content. I generally can't stand rubber layouts, where content is stretched from the left to the right of the browser screen.

The Bootstrap logo was also updated. The new logo looks more interesting, at least now I like it better.

According to the creators of Bootstrap, the new logo embodies a sense of the style of a set of rules enclosed in curly braces.

2. Discontinuation of Internet Explorer support

Finally, what should have happened a long time ago has happened - the refusal to support Internet Explorer browsers. But this is not surprising, since Microsoft itself refused to support this browser. They now have a new brainchild - Microsoft Edge, which corresponds to all modern browsers and is not inferior to them. The share of IE users is becoming less and less every day and is statistically less than 1% of users in the world.

True, in the documentation I did not find which versions of IE they refused, but on the Internet it is said about versions of IE 10 and 11. I understand the rejection of IE for developers as follows (I'm a web developer myself): here you go uphill with a heavy bag on your back and it's getting harder and harder to climb, and then you realize that you can throw that bag off and go light. And now you are ready to conquer any peaks. In other words, the abandonment of Internet Explorer gives great opportunities in creating more convenient and faster tools in the future.

3. Abandoning jQuery in favor of JavaScript

Probably the biggest innovation in this version will be the abandonment of the jQuery library in favor of native JavaScript. This applies to Bootstrap js-plugins, which have been working with the use of jQuery for a long time. Yes, jQuery is a popular library that today is still used by millions of sites around the world, but thanks to the progress in the development of JavaScript and browser support, today we have the opportunity not to use jQuery in our projects as a dependency. Personally, I no longer use jQuery in new projects and write in pure JS with support for ES6 syntax. All this means that projects created with Bootstrap 5 will become significantly lighter in file size and faster in terms of loading pages.

The good news is that if you want to still use jQuery, then it's possible. If Bootstrap detects jQuery, it will automatically add all the components to the plugin system. And this means that you will be able to call them as before. For example, the tooltip plugin can be called as follows – . The same goes for all other plugins.$('[data-bs-toggle="tooltip"]').tooltip()

In general, I want to say that titanic work has been done to update the js plugins. And basically, in the current beta versions, bugs of js plugins are tested and eliminated.

4.CSS variables (custom CSS properties)

With the abandonment of Internet Explorer in the new version of Bootstrap, custom CSS variables have become much more widely used. In version 4, root variables contained only colors and fonts. In the 5th version, layout parameters (breakpoints) and several components were added.

Read also: Stylish vertical accordion menu for website

In general, I don't see the usefulness of these css variables, since I don't write styles in css. I use the SASS preprocessor and the gulp assembly for layout. With this approach, I have all the variables stored in a separate sass file (_variables.sass), so you can manage the values much more flexibly. But maybe I will write a separate article about css-variables, maybe someone will be useful.

5. Improved documentation

As for documentation, it has become more convenient for navigation and obtaining information. For example, a new section "Customize" has been added, which contains all the settings and customization of the Bootstrap using SASS. Here you can learn how you can create your own themes and expand the Bootstrap to suit your needs.

Form

The Forms component has a separate section of documentation, Forms. In fact, all form styles have been combined here, including the field group component. Note that in the v.4 documentation, the field group component is a separate subsection. It has become much more convenient, even the search does not need to be used.

As for the radio buttons and checkboxes, in the 4th version they were stylized by default with a browser style. To style customly, it was necessary to add the prefix . In Bootstrap 5, there is no need for this prefix, the forms have a custom stylization by default. And this personally made me very happy. For example, in order to display a stylized checkbox, it is enough to specify the previous classes:custom-*

<!-- Checkbox -->
<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
   <label class="form-check-label" for="flexCheckDefault">
     Default checkbox
   </label>
</div>

<!-- Radio button -->
<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
   <label class="form-check-label" for="flexRadioDefault1">
     Default radio button
   </label>
</div>

<!-- Switch -->
<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
   <label class="form-check-label" for="flexSwitchCheckDefault">Switch</label>
</div>

As a result, we get such a charm.

Color

The color palette has been significantly expanded. So picking up shades has become much easier without using tricks such as or in sass.darkenlighten

Color palette colors Bootstrap 5

Work has also been done to improve the color contrast of primary colors. Yes, the colors have indeed become much nicer.

6. Utilities API

In Bootstrap 5 we have the ability to create our own or modify existing utilities. Utilities are helper classes that speed up your work. For example, indentation classes (margin, padding), background color classes, positioning classes, display classes, etc.

Here's what the width and margin utilities look like in a sass file:

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

In the parameter we can specify any of our classes. So now you can approach the layout much more flexibly.class

Some utilities have been moved to a separate "Helpers" section. I honestly don't quite understand why this was done, but according to the developers, it is to facilitate naming and improve documentation.

7. Improved mesh system

The difficulties of moving from v.3 to v.4 Bootstrap prompted developers not to move far from the v.4.x grid system. Only minor changes have been added.

Due to the fact that a new breakpoint (xxl) was added, a new class appeared in the grid accordingly. We'll talk about the xxl breakpoint a little later in the article..col-xxl-*

A class (short for gutters) has been added to add indentation to the grid. This class is added to the .row class. For example, to indent grid cells (horizontal and vertical) with a conditional value of 2, it is sufficient to add a class to the row class. You can also separately set the horizontal or vertical indentation— or respectively. This is somewhat reminiscent of the margin and padding interval utilities. I note that now it has become much easier to set indentations for cells, that's what really pleased me..g-*g-2.rowgx-2gy-2

<div class="row g-2">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

A new class has also been added for the string with the . This class automatically distributes columns of equal width within the parent block..row-cols-auto.row

The class has been removed and replaced with a new grid system..form-row

Grid cells no longer use the default property. and that's great, because I often had to redefine it..position: relative

8. Bootstrap icons

Now Bootstrap has its own collection of svg icons. I will not say that they belong to the 5th version, but it is useful for web development, so I decided to mention them. The collection has more than 1300 high-quality icons and you can connect them as svg-sprite or icon font. You can search for the necessary icons by a convenient search, which instantly gives the results.

Bootstrap Icon Collection

I really liked this collection of icons. And it is convenient that you can see how this or that icon will look, for example, in a button or in a grouped form field.

In the block on the right, we can choose a convenient format for saving the icon.

It is worth noting that this collection does not have a binding specifically to Bootstrap. You can use them without using Bootstrap in any project.

9. Experimental functions

RTL (right to left) is a feature that is currently being actively tested and if it goes well will appear in future versions of Bootstrap 5. RTL means from right to left, that is, it is possible to use fonts that are read from right to left. For example, an Arabic font. You can see how it looks on this example.

Offcanvas is an experiment with the outgoing sidebar on mobile devices. This panel can be a menu block or a shopping cart in an online store. In my opinion, this is a necessary thing, since I mostly make up the mobile menu going from left to right, and not falling out from the top, as it is now implemented in Bootstrap. To evaluate the future feature, you can look at an example. Reduce the browser window to mobile size.

10. Extra Nice Buns

1. As noted above, a new breakpoint (grid-breakpoint) called xxl has been added. It is used for widescreen screens with a resolution of 1440 pixels. and above. To be honest, in the 4th version I myself added it if necessary. And then it's available out of the box.

2. There have been slight changes in max-width sass mixes. In version v.4, to specify styles, say for the screen 992px and below, you had to use a mixin with a period md, that is, like this - . I honestly got a little confused here, in my head the number 992, and the alias of the dot we use is . In v.5, everything is as it should be - . @include media-breakpoint-down(md) { … }md@include media-breakpoint-down(lg) { … }

3. In Bootstrap 5, RFS (responsive font size) is enabled by default. In version 4, it had to be included separately by setting the value of . Also, we now have access to the mixin. You can pass the font value to it for the desktop screen, and for mobile there will be a smooth decrease. For example. However, I have not yet figured out how to specify the minimum value for mobile devices. If anyone knows, write in the comments. In general, there is a separate repository for RFS in GitHub, so if you are interested, you can look there.$enable-responsive-font-sizes: truefont-size()@include font-size(36px)

4. There was a smooth scrolling of the page to the anchor and implemented this with the help of CSS. Only I don't know how useful this thing is. Well, you can make a link "Upstairs" in the basement without JS. In general, I turned off this feature. Pressed into my variable file and that's it, smooth scrolling now doesn't work. $enable-smooth-scroll: false

5. Integration of the Bootstrap grid with the Masonry library. That made me happy too. I like the Masonry library and the Bootstrap grid too. How do I make friends with them? And so, get it, sign it... Connects pretty easily. You can read the example page.

6. Replaced the letters in the classes meaning the beginning and end (horizontal direction): l (left) and r (right), with the more logical names s (start) and e (end), respectively. In v.4, for example, to specify you had to specify a — class. Same if you need to — . In Bootstrap 5, it will now be like this: and . This applies to all classes where letters are used to denote left and right (beginning, end). I hope I explained it clearly.margin-left ml-*margin-rightmr-*ms-*me-*

Migrating from v.4 to v.5

If you want to upgrade to Bootstrap 5 from version 4.x, then check out the migration guide first. It's going to have to do a good job.

Conclusion

The developers of the legendary Bootstrap once again surprised us with innovations. I note that Bootstrap has been in the trend of popular HTML/CSS frameworks in the world for quite a long time. Today, I don't even know a web developer who doesn't use Bootstrap in their work.

Well, we will wait for a stable release. It will be, as the authors say after the beta3 version, but when exactly it is not yet clear to me. But I am already actively using the 5th version in my projects, I have not yet found any bugs.

On that note, I'll probably end. Thank you all for listening! Questions/suggestions are written in the comments. See you in other posts!