bootstrap 4 create modal footer with multiple rows

Question

I'm attempting to get a modal footer in bootstrap 4 to have multiple 100% width rows. So for the most basic bootstrap modal example below, is it possible to get the Close and Save changes buttons to be on different rows and both be 100% width?

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</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">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

Yes for sure you can place two modal-footer elements.

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</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 col-lg-12" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
                <div class="modal-footer">
                    <button type="button col-lg-12" class="btn btn-primary">Save changes</button>
                </div>
            </div>
          </div>
        </div>

Then in your css add this

#exampleModalLong .modal-footer .btn{
    width:100%;
}

Here you have a jsfillde link

Answer 2

A more "natural" way to do it would be to add

.modal-footer {
  display: block;
}

It's the default display: flex that makes the buttons share the same row.