CODEWITHSUNDEEP
twitter-bootstrap
Shaun Poore
Shaun Poore

Reputation: 642

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>

Upvotes: 8

Views: 8659

Answers (3)

Edison Biba
Edison Biba

Reputation: 4433

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 jsfiddle link

Upvotes: 12

HJW
HJW

Reputation: 402

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>

Upvotes: 0

Karima Kadaoui
Karima Kadaoui

Reputation: 51

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.

Upvotes: 4

Related Questions