Bootstrap-vue custom color variant

For those who are still struggling with this, here is my solution with Bootstrap ^4.5.2, Bootstrap-Vue ^2.17.3, and Vue ^2.6.11:

1. Add bootstrap-vue to your project: vue add bootstrap-vue

With this CLI command, Bootstrap and Bootstrap-Vue will be installed and configured into your project automatically.

2. Create a custom.scss file where you will override the default Bootstrap values, or in your case the color variants (I created mine into a /src/styles directory). Don't forget to import Bootstrap from the node_modules right after your custom values.

/src/styles/_custom.scss

$blue: #0E5EA7;
$primary: #2DCA73;
$spacer: 1.5rem;
$navbar-dark-color: #67DFF9;

@import 'node_modules/bootstrap/scss/bootstrap'

You can find all the customizable variables in /node_modules/bootstrap/scss/_variables.scss

3. Import the styles file into your App.vue style section:

App.vue

<style lang="scss">
@import 'styles/_custom.scss';
</style>

BootstrapVue uses Bootstrap V4.3's SCSS for styling and variants.

You can either custom theme Bootstrap V4.3's SCSS (via SCSS variables) to change the default colors for each variant, or you can create custom variants in CSS/SCSS.

Navbar's use the classes bg-<variant name> to define the background color.

You could create a class bg-foobar which has CSS background-color: #112233;.

I don't know if the solution I found is still valid because I'm not familiar with the library but it's usually a good strategy to peruse the issue tracker (especially the closed issues) of an open source project when the documentation falls short. Maybe this is what you're looking for github.com/bootstrap-vue/bootstrap...

Check out the BootstrapVue theming docs at bootstrap-vue.js.org/docs/referenc...