jQuery Show/Hide not working with Bootstrap 4

Question

I am upgrading to Bootstrap 4 and noticed that all of our jQuery show/hide's are not working properly when using a hidden attribute. If I remove the hidden attribute after the show() it works correctly. This wasn't necessary with Bootstrap 3.

Unfortunately we have about 1400 show/hide's that I would have to change in order to upgrade to Bootstrap 4. Anyone know what the issue is, or a simple solution to fix this without changing 1400 lines of code?

$(document).ready(function() {
  $("#hide").click(function() {
    $("p").hide();
  });
  $("#show").click(function() {
    $("p").show();
    //$("p").removeAttr("hidden");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p hidden>If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

Answer 1

You should inclue first in the head the link tag to the bootstrap.css code and then at the en of any tag and before the closing body tag you must add in order Jquery.js popper.js (if used in your code) and then the bootstrap.js file