title: How to make the two buttons at the same level?
body: <p>I followed the code using bootstrap Modal to create the two buttons shown below. I do not understand why they are displayed at different heights. </p>
  
  <p>Does anyone know if it is because of my machine or other reasons? I have the css bootstrap setting in the layout. Is there still something missing?</p>
  
  <p><img src="https://i.stack.imgur.com/dIxpG.png" alt="buttons mismatched height"></p>
  
  <pre><code>&lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"
  
  
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title" id="deleteModalLabel"&gt;Delete Post?&lt;/h5&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;form action="{{ url_for('delete_post', post_id=post.id) }}" method="POST"&gt;
                  &lt;input class="btn btn-danger" type="submit" value="Delete"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>