Add Bootstrap to Vue CLI project

Adding Bootstrap (or any other CSS framework) to Vue is fairly straightforward. In this example, I’ll install the entire Bootstrap CSS library (without javascript, no jquery, no popper.js, which are dependencies if you want everything Bootstrap).

First, install bootstrap to your project using npm or yarn:

npm install bootstrap
// or
// yarn add bootstrap

Next, in your main App component, import Bootstrap:


@import '~bootstrap/dist/css/bootstrap.css'

/* Rest of css here... */


Since the App component is essentially the global scope for your app, all elements can utilize Bootstrap styles.