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

<template> 
  <b-container> 
    <p>This is a bootstrap container!!!</p> 
     <b-btn variant="primary">Click</b-btn> 
  </b-container> 
 </template>

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/