Search code examples
javascripthtmlcssvue.jsbuefy

Why does importing Buefy to my Vuejs project makes <h1> tag and some Bootstrap element display the wrong style?

I'm using Bootstrap 4 and Buefy in my webpack-simple Vue.js project. When I import Buefy just like in the Docs, my tag does not enlarge the text and the nav-bar in Bootstrap 4 displaying the wrong width.

My main.js file looks like this

import Vue from 'vue';
import "bootstrap/dist/css/bootstrap.min.css";
import 'buefy/dist/buefy.css';
import Buefy from 'buefy';
Vue.use(Buefy);

What it should be when I remove the import Buefy:

enter image description here

But importing Buefy to my main.js lead to this problem:

enter image description here

Solution

  • Buefy is based on the underlying Bulma CSS framework which conflict with Bootstrap at some points as they implies global styles and class names that may be the same.

    You can try to use LESS with Bootstrap to avoid conflicts but I feel this is overcomplicating and you should just stay with one or the other, known that there is a Bootstrap-Vue port and that Bulma (Buefy also then) do exactly the same things as you can do with Bootstrap