Why does importing Buefy to my Vuejs project makes tag and some Bootstrap element display the wrong style?
up vote
0
down vote
favorite
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:
But importing Buefy to my main.js lead to this problem:
javascript html css vue.js buefy
asked Nov 9 at 3:44
quanpham0805
349
add a comment |
up vote
0
down vote
favorite
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:
But importing Buefy to my main.js lead to this problem:
javascript html css vue.js buefy
asked Nov 9 at 3:44
quanpham0805
349
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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:
But importing Buefy to my main.js lead to this problem:
javascript html css vue.js buefy
asked Nov 9 at 3:44
quanpham0805
349
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:
But importing Buefy to my main.js lead to this problem:
javascript html css vue.js buefy
javascript html css vue.js buefy
asked Nov 9 at 3:44
quanpham0805
349
asked Nov 9 at 3:44
quanpham0805
349
asked Nov 9 at 3:44
quanpham0805
349
asked Nov 9 at 3:44
quanpham0805
349
asked Nov 9 at 3:44
quanpham0805
349
349
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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
answered Nov 9 at 3:55
Plotisateur
363314
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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
answered Nov 9 at 3:55
Plotisateur
363314
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
add a comment |
up vote
1
down vote
accepted
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
answered Nov 9 at 3:55
Plotisateur
363314
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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
answered Nov 9 at 3:55
Plotisateur
363314
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
answered Nov 9 at 3:55
Plotisateur
363314
answered Nov 9 at 3:55
Plotisateur
363314
answered Nov 9 at 3:55
Plotisateur
363314
answered Nov 9 at 3:55
Plotisateur
363314
363314
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
add a comment |
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
I just use Buefy because I see some of the styles in Buefy but it is unavailable in Bootstrap-vue, but it seems to me that I need to stick with Bootstrap then :(
– quanpham0805
Nov 9 at 3:59
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
You can swap to Bulma/Buefy, it's a very fine CSS Framework; I'm doubting that Bootstrap miss anything (or his Vue port), but you might try your chance with other UI library like Vuetify or Element which are not based on Bootstrap or Bulma
– Plotisateur
Nov 9 at 4:04
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
The Bootstrap-vue doesn't seem to have a expand tabs like in Buefy, you can read my question on stackoverflow here, I hope you could suggest me a way link
– quanpham0805
Nov 9 at 15:30
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219555%2fwhy-does-importing-buefy-to-my-vuejs-project-makes-h1-tag-and-some-bootstrap-e%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
