title: Bootstrap 4 modal wont load from a href
body: <p>I have a problem with my modal contact form. It wont load I did everything I had to do. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="row py-2"&gt;
                &lt;div class="col-sm-3 hidden-md-down"&gt;
                  &lt;a class="bg-circle bg-primary" data-toggle="modal" href="#myModal"&gt;
                    &lt;i class="fa fa-2x fa-fw fa-address-card" aria-hidden="true "&gt;&lt;/i&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-9"&gt;
                  &lt;h4&gt;Kontaktujte nás&lt;/h4&gt;
                  &lt;p&gt;Proč ne? Rádi Vám poradíme&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;Rádi Vám poradíme napište nám!&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal col-sm-12"&gt;
            &lt;div class="form-group"&gt;&lt;label&gt;Jméno a příjmení&lt;/label&gt;&lt;input class="form-control required" placeholder="Vaše jméno a příjmení" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text"&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;&lt;label&gt;Zpráva&lt;/label&gt;&lt;textarea class="form-control" placeholder="Vaše zpráva zde.." data-placement="top" data-trigger="manual"&gt;&lt;/textarea&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;&lt;label&gt;E-Mail&lt;/label&gt;&lt;input class="form-control email" placeholder="email@gmail.com (abychom Vás mohli kontaktovat)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" type="text"&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;&lt;label&gt;Telefoní číslo&lt;/label&gt;&lt;input class="form-control phone" placeholder="777777777" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;&lt;button type="submit" class="btn btn-success pull-right"&gt;Odeslat&lt;/button&gt; &lt;p class="help-block pull-left text-danger hide" id="form-error"&gt;&amp;nbsp; The form is not valid. &lt;/p&gt;&lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a footer with contact us icon and when I click nothing happens I don't know If its problem with absolute position or z-index. If it will be necessary I will post it.</p>