How to Change the Bootstrap Primary Color in Vue 3.0 CLI

While some may argue that Bootstrap has aged, I believe it remains a robust framework. Bootstrap simplifies code and enhances readability, making it a valuable tool for many developers, myself included.

This article is aimed at explaining how to customize the original color provided by Bootstrap to suit your preferences. If you wish to make this change, follow the instructions below.

Installation of Bootstrap in Vue CLI

To integrate Bootstrap with Vue CLI, you can follow the official documentation available at https://bootstrap-vue.org/docs.
https://bootstrap-vue.org/docs

First, you need to install the required packages using npm:

npm install vue bootstrap bootstrap-vue

Next, you'll want to install the SASS library to use SASS in your Vue CLI project:
Install sass library for Vue CLI to use SASS.

npm install sass-loader node-sass

Customizing the Bootstrap Primary Color

To customize the primary color of Bootstrap in your Vue CLI project, you can create an SCSS (SASS) file and import it into your main.js file. This allows you to redefine the primary color to your preference.

1: Create an SCSS file in your project. You can place it in the src/assets/scss directory. Let's name it bootstrap-custom.scss. Here's an example of what the file might contain:

$primary: rgb(248, 126, 250);

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';

In the example above, we redefine the $primary variable with your desired RGB color values. You can adjust these values to set your preferred primary color.

2: In your main.js file, import the custom SCSS file you just created, like this:

import "./assets/scss/bootstrap-custom.scss"
// import 'bootstrap/dist/css/bootstrap.css' // Comment out or remove these lines
// import 'bootstrap-vue/dist/bootstrap-vue.css'

By importing the custom SCSS file, you override the Bootstrap primary color with your defined value. Be sure to comment out or remove the default Bootstrap CSS imports as shown above.

Now, Bootstrap in your Vue CLI project will use the customized primary color defined in bootstrap-custom.scss. You have successfully personalized the primary color of Bootstrap to match your project's design.

Conclusion

In this article, we've seen how to quickly customize Bootstrap's primary color in a Vue 3.0 CLI project. Bootstrap's enduring power in simplifying code and improving readability is evident.

By following these steps, you can adapt the primary color to match your project's style, creating a cohesive user interface. Enjoy the flexibility of Bootstrap and Vue CLI for your web development journey.

For more details, refer to the official documentation and reach out to the developer community for assistance. Happy coding!