How to Integrate Bootstrap CSS in Vue Js

In this short tutorial, we will teach you how to integrate Bootstrap in the Vue js application, and we will share the handy way to add Bootstrap in vue to help you learn to create a mobile-friendly responsive app.

First, we will add Bootstrap in vue using Bootstrap and Bootstrap vue packages, and this is the conventional method to include Bootstrap in vue through bootstrap packages.

If you integrate Bootstrap in vue, you get Grid-based columns, Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons, Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many other components.

Many of these UI modules depends on JavaScript extensions and jQuery plugins. Thus, BootstrapVue is an eloquent way to use Bootstrap in vue without adding an external jQuery script.

Getting Started

First step, tells you how to install a new vue app, ignore if already downloaded the app.

vue create vue-booking

Install Bootstrap Library

After getting inside the new vue app, use the suggested commands to install bootstrap and bootstrap vue packages in vue app.

npm install bootstrap bootstrap-vue

Update Dependency in Main Js

Further, register the bootstrap globally in the main.js configuration file; after doing this, you will be able to create UI components in vue using bootstrap.

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

Use Bootstrap in Vue

Now, we will show you how to use bootstrap in vue to create user-interface components, you need to create Navbar and Card files in components folder.

Add the code in components/Navbar.vue file.

<template>
    <div>
        <b-navbar toggleable="lg" type="dark" variant="info">
            <b-navbar-brand href="#">NavBar</b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav>
                <b-nav-item href="#">Link</b-nav-item>
                <b-nav-item href="#" disabled>Disabled</b-nav-item>
            </b-navbar-nav>

            <!-- Right aligned nav items -->
            <b-navbar-nav class="ml-auto">
                <b-nav-form>
                <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                </b-nav-form>

                <b-nav-item-dropdown text="Lang" right>
                <b-dropdown-item href="#">EN</b-dropdown-item>
                <b-dropdown-item href="#">ES</b-dropdown-item>
                <b-dropdown-item href="#">RU</b-dropdown-item>
                <b-dropdown-item href="#">FA</b-dropdown-item>
                </b-nav-item-dropdown>

                <b-nav-item-dropdown right>
                <!-- Using 'button-content' slot -->
                <template #button-content>
                    <em>User</em>
                </template>
                <b-dropdown-item href="#">Profile</b-dropdown-item>
                <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                </b-nav-item-dropdown>
            </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>
</template>

<script>
    export default {
        name: "Navbar",
        data: () => ({
          
        })
    };
</script>

Add the code in components/Card.vue file.

<template>
  <div class="mt-5">
    <b-card
      title="Card Title"
      img-src="https://picsum.photos/600/300/?image=25"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem;"
      class="mb-2">
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </div> 
</template>

<script>
    export default {
        name: "Card",
        data: () => ({
          
        })
    };
</script>

Update files in src/App.vue file.

<template>
  <div class="container">
    <Navbar />
    <Card />
  </div>
</template>

<script>
    import Navbar from './components/Navbar.vue'
    import Card from './components/Card.vue'

    export default {
      name: 'App',
      components: {
        Navbar,
        Card
      } 
    }
</script>

View App in Browser

To vindicate the integration of bootstrap in vue, run the vue app, and check on the browser how to bootstrap components are looking.

npm run serve

If working locally use the url to view the app.

http://localhost:8080

Integrate Bootstrap in Vue

Conclusion

Nowadays, Front-end development is not limited to making HTTP requests; it takes more than that. Creating an eye-catching layout using CSS and HTML is also a primary part of front-end development. We all know that writing HTML and CSS is a time-consuming process; to lower the development time, we may use the Bootstrap CSS framework.

This notable UI library is the vindication of the correct balance between UI/UX. It offers tons of user-interface components that make your life easy; it is truly an ultimate elixir for UI development.

The tutorial is completed; so far, we have seen how to install and use Bootstrap in Vue app.