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.


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


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’


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.



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.

Success Button
Warning 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.



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.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

classy ebony stepdaughter screwed sensually.kirmiziyilan.com

Would love your thoughts, please comment.x