title: Show Bootstrap Alert on Button Click via Javascript / jQuery
body: <p>I've referenced some <a href="https://stackoverflow.com/questions/10903526/how-to-toggle-a-bootstrap-alert-on-and-off-with-button-click">other questions</a> on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.</p>
  
  <p>I've referenced Bootstrap's documentation on <a href="https://getbootstrap.com/docs/4.0/components/alerts/#dismissing" rel="nofollow noreferrer">dismissing alerts</a>, and I have modified their sample to remove the <code>show</code> class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Alert --&gt;
  &lt;div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert"&gt;
      &lt;strong&gt;Success!&lt;/strong&gt; You just showed an alert.
      &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- Submit Button --&gt;
  &lt;div class="form-group"&gt;
      &lt;a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton"&gt;Click me&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>  $(document).ready(function() {
        $("#modalButton").click(function(){
            // alert("Success!") //Test to see if the function worked, it did
        $("#buttonAlert").show() //Shows Bootstrap alert
        })
    })
  </code></pre>
  
  <p>So the JavaScript function works as I've tested it with <code>alert("Success!")</code>, but the Bootstrap alert line <code>$("#buttonAlert").show()</code> does not show anything?</p>
  
  <p>Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.</p>