I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation.
Added to main.js
Vue.use(BootstrapVue);
Added to css file related to App.vue:
@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
Here is template:
<div class="main">
<div>
<b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
<p class="my-4">{{msg}}</p>
<p class="my-4">{{statusCode}}</p>
</b-modal>
</div>
<div>
<b-tab title="Players" active>
<br>Players data
</b-tab>
<b-tab title="Tournaments" active>
<br>Tournament data
</b-tab>
</div>
Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta
In Vue. js, we can add an inline style to our element by binding the style attribute in the HTML tag. For reference, :style is shorthand for v-bind:style . Inline styling can be done in two ways: using object syntax or array syntax.
At the time of this writing, Bootstrap-Vue doesn't support Vue 3 but BootstrapVue v4 will have Vue. js v3 support and Bootstrap v5 support according to this issue on GitHub.
With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue. js and the world's most popular front-end CSS library — Bootstrap v4.
Try importing the files using JavaScript.
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
On closer inspection it looks like you're missing <b-tabs>
also <b-modal>
is controlled by v-model
<div class="main">
<div>
<b-modal id="modal1" title="Something went wrong" v-model="errorModal">
<pre class="my-4">{{ msg }}</pre>
<p class="my-4">{{ statusCode }}</p>
</b-modal>
</div>
<!-- Make sure to wrap b-tab in b-tabs -->
<b-tabs>
<b-tab title="Players" active>
<br>Players data
</b-tab>
<b-tab title="Tournaments">
<br>Tournament data
</b-tab>
</b-tabs>
</div>
That should fix the styling of the tabs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With