DEV Community

Bootstrap-vue custom color variant

Alejandro Bonilla on January 18, 2019

Hi Dev's, i'm new in Bootstrap-Vue.

How I can customize the navbar background and text colors?

Thanks.

Collapse
 
tmorehouse profile image
T Morehouse •

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;.

Collapse
 
aconchatorres profile image
Andres Concha •

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'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rhymes profile image
rhymes •

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...

Collapse
 
tmorehouse profile image
T Morehouse •

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