Search code examples
htmltwitter-bootstrapimportpopover

My Bootstrap popover is not working, how can I debug it?


I have already see following answers:

1) Twitter's Bootstrap popover not working

2) Twitter bootstrap .popover not working

3) Bootstrap Popover not working

None helps me solve the problem.

I am trying to use a Popover in Bootstrap, I click the button but the popover doesn't appear.

I can not find the problem. This is the HTML code of the popover and I got it from the documentation.

        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on top
        </button>

This is instead the code relating to imports.

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/style/global.css">
<link rel="stylesheet" href="/bower_components/lightslider/dist/css/lightslider.css">
<link rel="stylesheet" type="text/css" href="/style/flags/flags.css"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/script/index.js"></script>
<script src="/bower_components/popper.js/dist/popper.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/lightslider/dist/js/lightslider.js"></script>

Solution

  • Per our discussion in the comments - the likely culprit here is Bower. Bootstrap abandoned Bower in V4 in favor of Yarn or npm:

    Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). See bower/bower#2298 for details.

    https://getbootstrap.com/docs/4.0/migration/#breaking

    Relying on a different package manager or including Bootstrap manually is the best route to ensuring that all of your CSS and JavaScript (as it relates back to Bootstrap) complies with V4 requirements.