marufalom
1 week ago

Bootstrap Dropdown menu is not opening

Posted 1 week ago by marufalom

Everything about bootstrap is works fine. I've read through other posts too but won't help.

app.js

require('bootstrap');

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {
    console.log('Doesnt work');
}

app.scss

@import "~bootstrap/scss/bootstrap";

the code i am trying:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

and webpack.mix.js

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            }),
           new HardSourceWebpackPlugin()
        ]
    };
});

I am using "bootstrap": "^4.3.1". Can anyone spot out what's the actual error here?

Please sign in or create an account to participate in this conversation.