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