Use Component bootstrap in Vue.js

image-source

If you come from a background as a web developer, you definitely know bootstrap. yes bootstrap is a css framework of the most popular and very complete its documentation. and in this tutorial I will use the feature feature in bootstrap and make it as a component that we will use repeatedly. Let's we just start.

What Will I Learn?

• Install bootstrap in vue
• Import and use bootstrap in vue
• Make bootstrap component

Requirements

• Install Node.js
• Install Vue-cli
• Intermediate knowledge in css
• Basic javascript and es6

Difficulty

• Basic

Install bootstrap in vue and use it

If you usually use bootstrap by CDN or download it, this time I will install bootstrap via NPM. Here's how to install it.
npm i bootstrap-vue

if there is no error then you will be able to result like the picture above.

Import and use bootstrap in vue

Now we will use and import the bootstrap in vue.js. first step would be to register it on main.js.

Use Bootstrap in vue.js

This my file main.js

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: { App }
})

import BootstrapVue from 'bootstrap-vue' : Import the bootstrap. Vue.use(BootstrapVue) : Tell the vuejs to use BootstrapVue

Import css bootstrap in vue js

There are two ways to import bootstrap css in vue.js. first we can import it as usual with links. and put it in tag < head > in your index.Html.
< link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css" >
< link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" >
The second way is to import in the component template . vue like this.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Both of which can function properly, only according to the choice there is only.

Make bootstrap component

After we can installed bootstrap and imported its css, now we can start using bootstrap feature feature into component. And I'll use some of the sample components we use in the vue template.

Component Allert

I will make a component bootstrap allert. I will make countdown allert dismissible .

Make Allert

< b-alert show variant="primary">Primary Alert< /b-alert>
< b-alert show variant="secondary">Secondary Alert< /b-alert>
< b-alert show variant="success">Success Alert< /b-alert>
< b-alert show variant="danger">Danger Alert< /b-alert>
< b-alert show variant="warning">Warning Alert< /b-alert>
< b-alert show variant="info">Info Alert< /b-alert>
< b-alert show variant="light">Light Alert< /b-alert>
< b-alert show variant="dark">Dark Alert< /b-alert>

Make Badge

< h2>Example heading New< /h2>
< h3>Example heading New< /h3>
< h4>Example heading New< /h4>
< h5>Example heading New< /h5>
< h6>Example heading New< /h6>

Breadcumb

<b-breadcrumb :items="items"/>

  data(){
    return{
       items: [{
        text: 'Home',
        href: '#'
      }, {
        text: 'Profil',
        href: '#'
      }, {
        text: 'username',
        href: '#'
      }, {
        text: 'edit',
        active: true
      }]
    }
  },

Jumbotron

< b-jumbotron header="Bootstrap Vue" lead="Bootstrap 4 Components for Vue.js 2" >
  < p>For more information visit website< /p>
  < b-btn variant="primary" href="#">More Info< /b-btn>
< /b-jumbotron >

We have successfully used bootstrap and made its component in our template, there are so many that we can use in bootstrap. you can try it yourself step visit the official website https://bootstrap-vue.js.org. just so much of me hopefully this tutorial can help you who can not get out of bootstrap and want to use it in vue.js. thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---