'bootstrap 4 create modal footer with multiple rows

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>

twitter-bootstrap

Solution 1:^[1]

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.

Solution 2:^[2]

Having two times a modal-footer will result in two borders too.

Remove can be easily done with border-0:

<div class="modal-footer">
    ...
</div>
<div class="modal-footer border-0">
    ...
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Karima Kadaoui
Solution 2	double_u1

'bootstrap 4 create modal footer with multiple rows

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]