Button cannot be added to bootstrap 4 Popper content ？

Question

I want to add a button to the Popover content of the bootstrap in the project, but I don't know why there is no button element in the page.
The version is v4.3.1 , but it can be omitted in v3.3.7 . How can I solve this problem? What is the result of v4.3.1 upgrade?

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script> $('[data-toggle="popover-click"]').popover({ html: true, trigger: 'click', placement: 'bottom', content: function () { return $('#popover_content_wrapper').html(); } }); </script> <a class="btn btn-primary mt-5" data-toggle="popover-click" data-img="">Click me</a> <div id="popover_content_wrapper" style="display: none"> <p class="title"> Do you want to close this message? </p> <div class="row"> <div class="col-md-2" id="confirm"> <i class="far fa-check-circle fa-2x green-text"></i> <button class="btn-primary btn-sm btn"></button> </div> <div class="col-md-2" id="deny"> <i class="far fa-times-circle fa-2x red-text"></i> </div> </div> </div>

Answer 1

I edited your question to improve formatting. And include external libraries to run snippet and see what you get.

Well, in my implementation below, I have wrapped your icons INTO the button . Then, I have added special btn classes: btn-success or btn-danger which is quite equivalent to your green-text or red-text but applied to the button.

I suggest you to build your popover component in the page (always visible) , then when format is as expected , script its behavior on click.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script> $('[data-toggle="popover-click"]').popover({ html: true, trigger: 'click', placement: 'bottom', content: function () { return $('#popover_content_wrapper').html(); } }); </script> <a class="btn btn-primary mt-5" data-toggle="popover-click" data-img="">Click me</a> <div id="popover_content_wrapper" style="display: block"> <p class="title"> Do you want to close this message? </p> <div class="row"> <div class="col-md-2" id="confirm"> <button class="btn btn-success btn-sm"> <i class="far fa-check-circle fa-2x"></i> </button> </div> <div class="col-md-2" id="deny"> <button class="btn btn-danger btn-sm"> <i class="far fa-times-circle fa-2x"></i> </button> </div> </div> </div>

You can replace the display: block of your id #popover_content_wrapper to your initial display: none to test your component as you expect.