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
[js]
npm i bootstrap-vue bootstrap@4.0.0-beta.2
[/js]
# Yarn
[js]
yarn add bootstrap-vue bootstrap@4.0.0-beta.2
[/js]
Then, you can enable VueBootsrap in your app entry point.
[js]
import Vue from ‘vue’
import BootstrapVue from ‘bootstrap-vue’
Vue.use(BootstrapVue);
[/js]
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.
[js]
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’
[/js]
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.
[html]
[/html]
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.
[html]
[/html]
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.
[html]
{{variant}} {{size}}
[/html]
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.
