Use Bootstrap 4 With Vue.js In Less Than 5 Minutes

The Bootstrap 4 (beta) is launched and I’m sure you guys are eager to use it with Vue.js. It’s good news that we can use bootstrap-vue to start using Bootstrap 4 with Vue.js.

Installation

It’s easy to use and install bootstrap-vue with NPM or YARN.

# NPM

npm i bootstrap-vue bootstrap@4.0.0-beta.2

# Yarn

yarn add bootstrap-vue bootstrap@4.0.0-beta.2

Then, you can enable VueBootsrap in your app entry point.

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

Note: Just make sure that it doesn’t affect other components as it will be injected globally and can affect to the other components.

Also, import the bootstrap CSS files.

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

Note: If you are unable, you have to manually include both Bootstrap and BootstrapVue CSS files in your bundle or reference them from static/ via index.html.

Usage of Bootstrap 4 with Vue.js

Of course, you can use lot of things as you do with your traditional apps by using bootstrap.

By using bootstrap 4 with Vue.js, you can use components like Alert, Forms, Buttons, Tables, Tabs and many more.

Use of Bootstrap 4 Alerts

Now, let’s take an example of using Alert in Bootstrap 4 with Vue.js.

<template>
  <div>
    <b-alert show>Default Alert</b-alert>
    <b-alert variant="success" show>Success Alert</b-alert>
  </div>
</template>

Here, you can use lot more variants like primary, secondary, success, danger, warning, info, light, dark.

Use of Bootstrap 4 Buttons

Next, let’s take an example of using Buttons with Bootstrap 4.

<b-button size="sm" variant="success">Success Button</b-button>
<b-button size="lg" variant="warning">Warning Button</b-button>

Here, as we’re using bootstrap, we can use variants like primary, secondary, success, outline-success, warning, danger, link.

Also, you can have list of buttons using loop.

<div class="row">
    <template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
        <div class="col-md-4 pb-2" v-for="size in ['sm','','lg']" :key="`{variant}_${size}`">
            <b-button :size="size" :variant="variant">
                {{variant}} {{size}}
            </b-button>
        </div>
    </template>
</div>

Now, I’m sure you are excited to use Bootstrap 4 with Vue.js. It’s simple and easy, right!

Moverover, there’re a lot of things that can help you to build your app using bootstrap 4 with vue.js. Here is a list of examples and 20+ Vue.js Admin Templates.

Your feedback is always appreciated! Feel free to share this article on below social media with your friends, they may need help more than you.