bootstrap 4 create modal footer with multiple rows

user_814264 0
Viewed 7024

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
3 Answers

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.

user_70619530

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>
user_119140280
Related