bootstrap vue

Use Bootstrap on Vue

Go to your Vue application folder and install bootstrap.

npm install bootstrap

Import Bootstrap’s CSS and JavaScript files in your main Vue component (e.g., App.vue):

<template>
  <div>
    </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
</script>

<style scoped>
  /* Optional: Add custom CSS overrides for Bootstrap styles here */
</style>

Once you’ve included Bootstrap, you can use its components directly in your Vue templates:

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>My Vue App</h1>
      </div>
    </div>
  </div>
</template>

And that is it. Happy coding.

This post has 1 like.

Like this post. 👍

Leave a Comment

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