Bootstrap 10th anniversary, what new features does Bootstrap 5 have?

Recently, the well-known front-end toolkit Bootstrap official blog announced its tenth anniversary. Its founder Mark Otto reviewed some achievements and milestones in the past decade:

• The document has been viewed more than 2.5 billion times, more than 685,000 times per day;
• Since 2015, there have been 394 million downloads of npm, and there will be more than 131 million downloads in 2020 alone. In the past six years, there have been 180,000 times a day.
• 50 million RubyGems downloads
• 57 million NuGet downloads
• 7.5 million Packagist installations
• Used by more than 22% of websites
• Used by 2.7 million projects on GitHub
• More than 21,100 commits on GitHub, including nearly 35,000 issues and pull requests

Bootstrap is one of the most popular CSS libraries. It allows developers to easily use beautiful styles and components and create responsive websites. Using Bootstrap can save developers time, especially for components used in almost every project.

Bootstrap 5 (the current major version, released in May 2021) brings a lot of changes and improvements, including the addition of new components, new classes, new styles of old components, updated browser support, removal of some old components, and More.

In this article, we will introduce the changes and deletions in Bootstrap 5, as well as the most exciting new content.

When to use Bootstrap (when not to use)

Bootstrap bills itself as "the world's most popular framework for building responsive, mobile-first sites" and has 152k stars on GitHub. I don't think this is too much. Especially for beginners, Bootstrap is a great way to start creating modern and clean websites. It can easily implement complex, mobile-first designs and provides many components that you may need in multiple projects.

Bootstrap has a very low learning curve and is very suitable for static websites that do not require construction steps, because you can directly reference the library from Bootstrap's CDN. This is in sharp contrast to some other popular CSS frameworks, which may be optimized for the use of bundlers or task runners.

However, you should also know that Bootstrap is not a silver bullet. For the inexperienced, Bootstrap is prone to confusion and complicated markup. In terms of kilobytes, it is also a relatively heavy library (although it is improving with each release), so if you only use one or two of its features, it may not be the best choice. Like any abstraction, if you have a good grasp of the underlying technology and can make an informed decision about when to use it, it will be of great help.

Upgrade from Bootstrap 4 to 5

Upgrading from Bootstrap 4 to 5 is generally easy. Most of the components in Bootstrap 4, their classes and utility classes are still available in Bootstrap 5. When migrating, the main thing you should pay attention to is whether the class or component you are using has been deleted. If they are deleted, you can replace them with utility classes, or use other methods to achieve the same result. The second thing you should pay attention to is the conversion of attributes data- data-bs- in components. These components require JavaScript as part of their functionality. (We will cover this in detail in the next section.)

If you use Bootstrap's Sass file, some variables and mixins are renamed. Bootstrap 5 has an extensive and detailed section, all about customization, as well as detailed information about Sass variables and mixins for each component, on their respective documentation pages.

What's changed

Bootstrap 5 brings core changes to Bootstrap as a library, including changes in required dependencies and browser support. It also makes changes to the components and classes we have been using in previous versions.

jQuery is no longer a dependency

Compared with the previous version, jQuery is no longer a dependency of Bootstrap. Now, you can take full advantage of Bootstrap without it, but you still need Popper.js. This change makes it easier to use Bootstrap in projects that do not require or use jQuery—for example, when combining Bootstrap with React.

If Bootstrap is part of your website, you can still use jQuery. If Bootstrap window object, it will automatically add all components to the jQuery plug-in system. Therefore, if you migrate from v4 to v5, you don't need to worry about this change, and you can still use jQuery and Bootstrap when necessary.

But what if you use jQuery in your website, but you don’t want Bootstrap to use jQuery? You can do this by adding the attribute data-bs-no-jquery to the body element of the document:

<body data-bs-no-jquery="true">
</body>

How does Bootstrap work without jQuery? For example, in v4, you can use the following code in JavaScript to create a Toast element.

$('.toast').toast()

In Bootstrap 5, if your website already uses jQuery, you can use the same code to create a Toast element. If you don't have jQuery, you need to use code like the following to create a Toast element:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

It's just using native JavaScript to query the document has .toast class element, and then use new bootstrap.Toast() on elements of a Toast component initialization.

Browser support changes

Before v4, Bootstrap used to support Internet Explorer (IE) 10 and 11. Starting with Bootstrap 5, support for IE has been completely cancelled. Therefore, if your website needs to support IE, you should probably be careful when migrating to v5.

Other changes supported by the browser include:

• Firefox and Chrome are now supported from version 60
• Safari and iOS support now starts from version 12
• Android browser and WebView support now starts from version 6

Data attribute changes

Bootstrap 5 changes the naming of data attributes, which are usually used by components that use JavaScript as part of their functionality. Previously, the data attributes of most components that depend on certain JavaScript functions started with data- . For example, to create a Tooltip component in Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Please pay attention to the usage of data-toggle and data-placement In Bootstrap 5, the data properties of these components now data-bs to facilitate the naming of Bootstrap properties. For example, to create a Tooltip component in Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Instead of using data-toggle and data-placement , we use data-bs-toggle and data-bs-placement . If you use JavaScript to create components in Bootstrap, you may not need to make any changes. However, if your component only relies on data attributes to operate, you need to change all data attributes starting with data to data-bs .

Fixed some bugs

In the document under "Browser and Device" of Bootstrap 4, some bugs that occurred on the browser are listed. These bugs are no longer listed in the same list in Bootstrap 5. The list includes the following:

• On iOS, the mouse hover style is applied to the element of the touch event, which is undesirable because it is considered an unexpected behavior.
• .container in Safari 8 and above will cause the font size to become smaller when printing.
• Border radius is covered by the verification feedback (but it can be solved by adding an additional .has-validation ).

The list of bugs and issues in the Bootstrap 4 documentation also details bugs that occur in browser versions that are no longer supported.

Other changes

There are more changes, either minor or not causing drastic and noteworthy changes. These changes are:

• Bootstrap 5 now uses Popper v2 . Make sure to upgrade your version of Popper. Popper v1 will no longer work because Bootstrap 5 requires @popperjs/core instead of the previous Popper.js .
• Now Bootstrap 5 can be used as a module in the browser, using the version of Bootstrap built as an ECMAScript module.
• Since Libsass and Node Sass (used in Bootstrap 4) are now deprecated, Bootstrap 5 uses Dart Sass to compile source Sass files into CSS.
• In the past, in order to hide an element, but allow assistive technology to discover it, the .sr-only class could be used. Now this class is replaced with .visually-hidden .
• In the past, in order to hide an interactive element but allow assistive technology to discover it, you needed to use the .sr-only and .sr-only-focusable classes at the same time. In Bootstrap 5, you only need to use .visually-hidden-focusable instead of .visually-hidden .
• Blockquotes with named sources are now <figure> elements. The following is an example of Blockquotes in Bootstrap 5:
  
• In previous versions, the table style was inherited. This means that if a table is nested in another table, the nested table will inherit the parent table. In Bootstrap 5, table styles are independent of each other, even if they are nested.
• Border utilities now supports forms. This means you can now use the border color tool to change the border color of the table. Below is an example of using the border utilities of the form in Bootstrap 5.
  
• The default style of breadcrumbs has been changed, removing the default gray background, padding and border radius in previous versions. The following is an example of the breadcrumb style in Bootstrap 5:
  
• The naming of classes that use left and right to refer start and end For example, the drop-down list .dropleft and .dropright are replaced .dropstart and .dropend .
• Similar to the previous point, l for left and r for right now use s for start and e for end, respectively. For example, .mr-* is now .me-* .
• .form-control-range class used for range input is .form-range .
• Gutters is now set to rem instead of px .
• .no-gutters has been renamed .g-0 as part of the newly added Gutters class (more on this in a later chapter).
• Links are now underlined by default, even without hovering.
• The name of the custom form element class has been changed from .custom-* to part of the form component class. For example, .custom-check is .form-check replaced .custom-select is .form-select replaced, and so on.
• Now you need to add .form-label to the label.
• Alerts, breadcrumbs, cards, drop-down menus, list groups, modals, pop-up windows, and tooltips now use the same fill value, using the $spacer variable.
• The default padding in the badge element is now changed .25em/.5em .35em/.65em .

• The wrapper for the toggle button is used for checkboxes and radio buttons. The current markup has also been simplified. In Bootstrap 4, the checkbox of the toggle button is implemented by the following markup:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Checked
    </label>
  </div>

In Bootstrap 5, it can be done in a simpler way:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>

• The buttons’ active and hover states add contrast in color.
• The close button class is now renamed .close .btn-close and uses SVG icons instead of &times .
• The drop-down dividing line is now darker for better contrast.

• Navbar content should now be wrapped in a container element. For example in Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>

In Bootstrap 5 it becomes:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

• .arrow category in the popover component is now replaced by .popover-arrow .arrow category in the Tooltip component is now replaced by .tooltip-arrow .
• The default Toast duration is changed to 5 seconds.
• fallbackPlacements in the tooltip, drop-down menu, and pop-up window components has been changed to the array ['top', 'right', 'bottom', 'left'] .
• .text-monospace has been renamed to .font-monospace .
• .font-weight-* has been renamed to .fw-* and .font-style-* has been renamed to .fst-* .
• .rounded-sm and .rounded-lg now been replaced by a series of rounding classes from 0 to 3, .rounded-* .

What's new?

Finally, in version 5, Bootstrap has added many exciting new features to its library. Some of these changes include new features, new supported concepts, new components, new utility classes, and more.

Responsive font size is now enabled by default

Responsive font size (RFS) appeared in previous versions of Bootstrap, but it is disabled by default. Bootstrap 5 has RFS enabled by default, making the fonts in Bootstrap more responsive. RFS is an auxiliary project created by Bootstrap, originally to scale and adjust font sizes responsively. Now, it can also do the same for margin, padding, box-shadow and other attributes.

What it does is basically calculate the most suitable value based on the size of the browser, and these calculations are translated into calculation functions at compile time. Using RFS also abandons the previous practice of using px, and uses rem, because it helps to achieve better responsiveness.

If you use Sass files in Bootstrap, you can now use mixins made by RFS, including font size, margins, padding, etc. This allows you to ensure that your components and styles are responsive.

Right to left support

Bootstrap 5 uses RTLCSS to add left-to-right (RTL) support. Since Bootstrap is used all over the world, providing RTL support out of the box is an important step. For this reason, Bootstrap 5 abandoned specific direction naming (for example, use left and right ) in favor of start and end . This makes Bootstrap flexible enough to handle both left-to-right (LTR) and RTL websites. For example, .dropleft is now .dropstart , .ml-* is now .ms-* , and so on.

In order for Bootstrap to recognize and apply RTL style on your website, you need to set <html> of dir to rtl lang attribute with website RTL language. For example, lang="ar" .

Finally, you need to include Bootstrap's RTL CSS file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

In this way, your website can support RTL.

New component

Bootstrap 5 brings some new components to the library. Some of these components are part of other components and are now independent components.

Accordion

Previously, Accordion was part of the Collapsible component, rather than its own component. In Bootstrap 5, Accordion is a new component. Accordion has a new class, .accordion , which contains a list of accordion items. In addition, compared to the previous style in Bootstrap 4, Accordion has a new style. The following is an example of the accordion component.

Offcanvas overlap sidebar

Another new component is Offcanvas, which allows you to create an overlapping sidebar. This sidebar is usually used to display menus on small devices. You can place it on either side of the page by .offcanvas-start for the left in the LTR .offcanvas-top for the top, .offcanvas-end for the right in the LTR, and .offcanvas-bottom You can also specify whether Offcanvas should have a background. The following is an example of the use of the Offcanvas component:

Floating Label

Floating Label is a new component of the Form component. It allows you to create an input whose label looks like a placeholder at first, and then when the input receives focus, the label will float to the top of the input, higher than the value. It also applies to <select> elements and <textarea> elements. The following is an example of using floating labels:

In addition to new components, there are new classes of existing components, new utility classes, new auxiliary classes, and more.

More information: https://www.sitepoint.com/bootstrap-5-new-features-examples

---

Welcome to subscribe to my article public number [front-end full-stack developer]