title: align Modal on the right side in Bootstrap 4
body: <p>I am using Bootstrap 4. I want that the modal is aligned right (see picture what I mean):</p>
  
  <p><a href="https://i.stack.imgur.com/NYBeq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NYBeq.png" alt="how I want"></a></p>
  
  <p>This is my code so far. I got it from the Bootstrap documentation:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModalScrollable" id="btn1"&gt;mehr Erfahren&lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-dialog-scrollable" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title" id="exampleModalScrollableTitle"&gt;Winkelstufe&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-body"&gt;
            ...
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Schliessen&lt;/button&gt;         
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I would appreciate your help on how to do it.</p>