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.
Leave a Reply