Lesson 26: Bootstrap with Vue.js (BootstrapVue)

—

by

admin
in
Module 1: Introduction to Bootstrap 2025

Module 2: Bootstrap Grid System & Responsive Layouts

Module 3: Bootstrap Components & UI Elements

Module 4: Navigation & Menus in Bootstrap

Module 5: Advanced Bootstrap Features

Module 6: Forms, Authentication & Data Handling

Module 7: Bootstrap & JavaScript Integration

Module 8: Bootstrap with React, Vue, and Angular

📌 Objective: Learn how to use Bootstrap with Vue.js, including BootstrapVue, and compare it with other UI frameworks like Vuetify.

🔹 1. Introduction to Bootstrap in Vue.js

Bootstrap is a popular UI framework for building responsive designs. When using Vue.js, BootstrapVue provides Vue-specific components.

💡 Why Use Bootstrap with Vue.js?
✔️ Pre-built responsive UI components.
✔️ Works well with Vue’s reactivity system.
✔️ No need for jQuery – Fully Vue-friendly.

🔹 2. Installing Bootstrap in a Vue Project

There are two ways to use Bootstrap with Vue.js:

1️⃣ Method 1: Using Bootstrap CDN

✅ Add Bootstrap’s CDN to index.html

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

🔹 What happens?

  • You can use Bootstrap classes in your Vue templates, but you won’t have Vue components.

2️⃣ Method 2: Installing Bootstrap via npm

✅ Run the following command in your Vue project:

sh
npm install bootstrap

✅ Import Bootstrap in main.js:

javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

🔹 What happens?

  • This allows Bootstrap styles and JavaScript components to work in Vue.

🔹 3. Installing & Using BootstrapVue

BootstrapVue provides Vue components that work with Bootstrap.

1️⃣ Installing BootstrapVue

✅ Run the following command:

sh
npm install bootstrap-vue

✅ Import BootstrapVue in main.js:

javascript
import { createApp } from "vue";
import App from "./App.vue";
import { BootstrapVue3 } from "bootstrap-vue-3";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");

🔹 What happens?

  • BootstrapVue components are now available in your Vue app.

🔹 4. Using Bootstrap Components in Vue.js

Now you can use BootstrapVue’s prebuilt Vue components.

1️⃣ Example: Using BootstrapVue Button

✅ Example: Simple BootstrapVue Button

vue
<template>
<b-button variant="primary">Click Me</b-button>
</template>

🔹 What happens?

  • The button uses Bootstrap’s primary button styling without needing classes.

2️⃣ Example: BootstrapVue Grid System

✅ Example: Responsive Layout

vue
<template>
<b-container>
<b-row>
<b-col cols="6" class="bg-primary text-white p-3">Column 1</b-col>
<b-col cols="6" class="bg-secondary text-white p-3">Column 2</b-col>
</b-row>
</b-container>
</template>

🔹 What happens?

  • A responsive layout is created with two columns.

🔹 5. Using BootstrapVue Forms

✅ Example: Form with Validation

vue
<template>
<b-form @submit.prevent="handleSubmit">
<b-form-group label="Email">
<b-form-input v-model="email" type="email" required></b-form-input>
</b-form-group>
<b-form-group label="Password">
<b-form-input v-model="password" type="password" required></b-form-input>
</b-form-group>
<b-button type="submit" variant="success">Submit</b-button>
</b-form>
</template>

<script>
export default {
data() {
return {
email: "",
password: "",
};
},
methods: {
handleSubmit() {
alert(`Email: ${this.email}, Password: ${this.password}`);
},
},
};
</script>

🔹 What happens?

  • The form validates inputs and displays alerts on submit.

🔹 6. BootstrapVue Tables

BootstrapVue provides custom table components for displaying data.

✅ Example: Dynamic Table

vue
<template>
<b-table :items="users" :fields="fields"></b-table>
</template>

<script>
export default {
data() {
return {
fields: ["id", "name", "email"],
users: [
{ id: 1, name: "Alice", email: "alice@example.com" },
{ id: 2, name: "Bob", email: "bob@example.com" },
],
};
},
};
</script>

🔹 What happens?

  • The table dynamically displays user data.

🔹 7. BootstrapVue vs Vuetify

BootstrapVue and Vuetify are two popular UI frameworks for Vue.

Feature BootstrapVue Vuetify
Design Style Traditional Bootstrap Google Material Design
Grid System Uses Bootstrap grid Uses Material Design grid
Components Prebuilt Vue components Advanced Material components
Customization SCSS variables Uses Theme Provider
Flexibility Works with any design system Strict Material Design rules

✅ Use BootstrapVue if:

  • You want familiar Bootstrap styling.
  • You need easy-to-use responsive layouts.

✅ Use Vuetify if:

  • You need a modern Material Design UI.
  • You want advanced Vue-specific components.

🔹 8. Adding BootstrapVue Modals

Modals are popups for forms or alerts.

✅ Example: BootstrapVue Modal

vue
<template>
<b-button v-b-modal.modal1>Open Modal</b-button>

<b-modal id="modal1" title="BootstrapVue Modal">
<p>Modal content goes here.</p>
</b-modal>
</template>

🔹 What happens?

  • Clicking the button opens a modal dialog.

🔹 9. Adding BootstrapVue Alerts

Alerts are useful for notifications and messages.

✅ Example: Alert Message

vue
<template>
<b-alert show variant="danger">Error: Something went wrong!</b-alert>
</template>

🔹 What happens?

  • A red error message is displayed.

📝 Lesson Recap Quiz

🎯 Test your knowledge of BootstrapVue.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What command installs BootstrapVue?
a) npm install bootstrap-vue
b) npm install vue-bootstrap
c) npm install bootstrapjs-vue
d) npm install vue-bootstrap-ui

✅ Correct Answer: a) npm install bootstrap-vue

2️⃣ What is the main difference between BootstrapVue and Vuetify?
a) BootstrapVue uses Material Design principles
b) Vuetify follows Bootstrap’s grid system
c) BootstrapVue uses Bootstrap’s design, while Vuetify follows Material Design
d) BootstrapVue requires jQuery

✅ Correct Answer: c) BootstrapVue uses Bootstrap’s design, while Vuetify follows Material Design

📌 True or False

3️⃣ BootstrapVue provides Vue-specific components like <b-button>.
✅ Answer: True

4️⃣ You can use Bootstrap’s CDN with Vue, but won’t have BootstrapVue components.
✅ Answer: True

🎯 Practical Challenge

✅ Install BootstrapVue and create a responsive form with BootstrapVue components.
✅ Add a BootstrapVue table to display sample data.
✅ Create a modal popup with BootstrapVue.
✅ Post your solution in the discussion forum for feedback!

🎓 Lesson Summary

✅ BootstrapVue adds Vue-friendly components for Bootstrap.
✅ It provides prebuilt components like <b-button> and <b-form>.
✅ BootstrapVue is great for traditional UI, while Vuetify follows Material Design.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *