Bootstrap 5: These are the main features of the update

Bootstrap, as defined on its website, is "the world's most popular open-source front-end toolkit, featuring Sass variables and mixins, a responsive grid system, extensive prebuilt components, and powerful plugins."

With version number 5, Bootstrap surprised its users with new functions and features, we are going to review the ones that stood out the most among the developers of this frontend technology.

Bootstrap 5 Features

1. jQuery support

Bootstrap will no longer use the jQuery library, improvements have been made to the JavaScript library so that this change can be effected. Although the introduction of jQuery simplified the tasks that were done with JavaScript, it will no longer be supported.

There will now be smaller source files and faster page load times, this will allow Bootstrap to have a more friendly style, which is sure to draw other users' attention to the technology.

Note that while using jQuery is no longer required in Bootstrap 5, you can still use it if you wish. It's also worth noting that all JavaScript plugins are still available.

2. CSS and its custom properties

Custom CSS properties can be used, now that Internet Explorer support has been removed. Microsoft's browser does not support custom properties, this is one of several reasons that have stopped web developers for a long time.

CSS is more flexible and programmable with custom variables, which are divided into two types: root variables and component variables. Root variables are located in the _root.scss file, while component variables are used to prevent accidental inheritance of styles within components with nested tables.

3. Improved network system

Contrary to what happened with versions 3 and 4, Bootstrap 5 preserves a large part of the system, building on the existing one instead of replacing it completely. Some of the slight changes that occurred are:

• The gutter class (.gutter) has been replaced by a utility (.g*) much like margin and padding
• Vertical spacing classes have also been included.
• Columns no longer default to position:relative

4. Improved documentation

The documentation has been improved with more information, especially regarding customization. A common problem was that with many websites using Bootstrap, you could tell immediately that they were using Bootstrap. Bootstrap 5 now comes with a new look and feel and better customization.

It has greater flexibility and allows you to customize your themes, and thus not all websites where you work with Bootstrap look the same. The v4 page was extended with content and code snippets, these to build on top of the Sass files. Additionally, an npm project can be found on Github available as a template repository.

How to install Bootstrap with Vue

Before installing Bootstrap, you must first have a Vue project created, if you don't already have it ready, you can create it by entering the command “Vue create” followed by the project name, like so:

$ vue create vue-project-name

It will ask you to select the preset or create your own. After choosing the one that suits you best, the Vue project will be created.

After this, we can now install "Bootstrap-vue" using Yarn or NPM. If you want to install "bootstrap-vue" and "Bootstrap" using the Yarn package manager, write the following code:

$ yarn add bootstrap bootstrap-vue

Or, if you want to install them using npm, write the code:

$ npm install bootstrap bootstrap-vue --save

Once both are installed, you need to enable them in the main.js file

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'bootstrap/dist/css/bootstrap.css';

Vue.use(BootstrapVue);

After enabling them, you can now use them in your Vue project.

We recommend you on video