0

I am trying to display a basic bootstrap-vueJS modal but for some reason something is not working.

Here is what the display looks like :

enter image description here

This is the code from the documentation to display the modal : 

<div>
    <b-button v-b-modal.modal-1>Launch demo modal</b-button>

    <b-modal id="modal-1" title="BootstrapVue">
        <p class="my-4">Hello from modal!</p>
    </b-modal>
</div>

This is what my app.scss file looks like :

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
//@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.min.css';

These are my dependencies from my package.json file :

    "dependencies": {
    "admin-lte": "^2.4.18",
    "bootstrap-vue": "^2.1.0",
    "bootstrap-vue-datatable": "^1.0.7",
    "fine-uploader": "^5.16.2",
    "laravel-vue-datatable": "^0.4.2",
    "moment": "^2.24.0",
    "paginationjs": "^2.1.5",
    "vue-router": "^3.1.3"
}

Thanks for your help !

Louis Charles
  • 330
  • 4
  • 18
  • Why do you have `//@import '~bootstrap/scss/bootstrap';` commented out in your SCSS? Bootstrap's SCSS/CSS is required for bootstrap to work. – Troy Morehouse Dec 24 '19 at 01:27
  • Hello, I commented this line because I wanted to try with another bootstrap css file. But even with the file you are talking about the modal still doesn't show. Do you have any idea why ? Thanks for your help ! – Louis Charles Dec 24 '19 at 05:56
  • You should also add `bootstrap` as a dependency `"bootstrap": "^4.3.1",` – Troy Morehouse Dec 24 '19 at 06:18
  • And how are you including `app.scss` in your app? – Troy Morehouse Dec 24 '19 at 06:19
  • I am including it with laravel mix : mix.js('resources/js/menusV2/app.js', 'public/js/menusV2') .sass('resources/sass/app.scss', 'public/css'); – Louis Charles Dec 24 '19 at 06:58
  • I already imported the bootstrap css files because I use adminLTE2, do you think this is where the problem is coming from ? Thanks – Louis Charles Dec 24 '19 at 06:58

0 Answers0