Customizing Bootstrap Vue

Vue js has been becoming more and more popular in the past few years, just like React js and Angular a lot of plugins and libraries have been released for vue including UI component libraries like vutify and bootstrap vue, etc, I usually choose the later due to it’s more flexibility and compatibility if you are familiar or used to bootstrap, bootstrap vue is a great option for you.

Getting Started

Bootstrap vue uses bootstrap 4’s css for styling so we have to install and import both bootstrap and bootstrap vue.

Bootstrap’s official docs recommend that bootstrap’s core files shouldn’t be edited directly, the standard way to customize bootstrap/bootstrap vue is creating a custom scss file and customize variables and styles in that file.

if you use nuxt, you have to disable bootstrap and bootstrap vue styles in nuxt.config.js:

bootstrapVue: {
 bootstrapCSS: false,
 bootstrapVueCSS: false
}

1- Create an empty scss file and import it

Create a custom.scss file (or any file name you like) in your assets folder and import it in your app’s entry point, if you use nuxt you have to register the file as a css file:

css: ['~/assets/styles/custom.scss'],

2- customize bootstrap

in this custom scss file, put your variable and color overrides before importing bootstrap and put your style overrides and custom css after importing bootstrap this way you can easily fully control bootstrap vue styles, for example:

// Custom Bootstrap variable overrides go first
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 720px,
  lg: 992px,
  xl: 1300px
);
$input-btn-focus-width: 0px;
//colors
$primary: #e7ee7e;
$secondary: #888888;

// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

// And define any of your custom or additional CSS/SCSS here,
// or via an @import
.btn{
    border: none;
}
@import './mixins.scss'

In the above example I overrided bootstrap’s responsive breakpoints, disabled buttons border radius and customized two of bootstrap’s default colors, after importing bootstrap and bootstrap vue scss files you can customize default styles and import more css.

All bootstrap variables are available in this file.

I will soon release more articles about vue stay tuned, Thanks for reading!