software-development-company-logo

Tag: Lesson 26: Bootstrap with Vue.js (BootstrapVue)

  • Lesson 26: Bootstrap with Vue.js (BootstrapVue)

    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.