A guide to Bootstrap 4 within Vue Apps

Setting up a Bootstrap and Vue project

Hello hivers!!! This time i would like to showcase another vue framework you could use in your projects :D

This time the framework is called Bootstrap-Vue and its just a wrapper of the very known library Bootstrap :D

Let’s create a new Vue CLI project:

$ vue create bootstrap-vue-app

You can now add the Bootstrap-Vue plugin to your project.

$ vue add bootstrap-vue

Components

Almost all of the features of Bootstrap are available as globally registered components in Bootstrap-Vue. They are prefixed with b-

Create a component or edit the pre-defined ones and insert some bootstrap components just like

Let’s now serve the app we’ve created

npm run serve

Now you should see the following:

There are many, many pre-defined components easy to use and with the bootstrap aspect widely used. Please check bootstrap vue for more info: https://bootstrap-vue.org/