выровнять модал по правой стороне в Bootstrap 4

Question

Я использую Bootstrap 4. Я хочу, чтобы модал был выровнен вправо (см. Рисунок, который я имею в виду):

Это мой коддо сих пор.Я получил это из документации Bootstrap:

<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModalScrollable" id="btn1">mehr Erfahren</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalScrollableTitle">Winkelstufe</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>         
        </div>
      </div>
    </div>
  </div>

Буду признателен за помощь в том, как это сделать.

Answer 1

если вы используете Bootstrap 4 для сетки

    <div class="container">
      <div class="row">
   // <!--this for image model-->
        <div class="col-md-7">

        </div>

    <!--this for right model-->
        <div class="col-md-4">

    // your code here //


        </div>
      </div>
    </div>

Answer 2

Измените свой HTML:

  <!-- Modal -->
        <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
                    </div>

                    <div class="modal-body">
                        <p>Text</p>
                    </div>

                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- modal -->

Пример: https://codepen.io/bootpen/pen/jbbaRa