CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Gislef
Gislef

Reputation: 1637

How to do Modal Bootstrap appear on bottom

How to set up the bootstrap for modal appear in the browser's bottom?

https://jsfiddle.net/9fg7jsu3/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">  
        <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="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

I hope to have a result like this:

enter image description here

Thanks for any help

Upvotes: 14

Views: 55324

Answers (4)

Federico Navarrete
Federico Navarrete

Reputation: 3274

In my case, this code worked perfectly:

.modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0%;
  right: 0%;
  transform: translate(-50%, -50%);
}

In Bootstrap 5, the accepted solution changes the width without any specific reason.

Upvotes: 1

matvs
matvs

Reputation: 1873

Something like that will do the work. Now you need to play with paddings, margins and width to adjust your modal;

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}

Use modal-dialog, not modal, otherwise the modal won't disappear if you click above it.

https://jsfiddle.net/9fg7jsu3/2/

Upvotes: 22

tomcounsell
tomcounsell

Reputation: 5081

On the <div class="modal-dialog" ... use this,

<div class="modal-dialog modal-dialog-centered" style="align-items: flex-end;">
    ...
</div>

Upvotes: 12

Ivan Sisovic
Ivan Sisovic

Reputation: 19

This one worked for me

.modal-dialog {
  top: calc(100% - 300px); 
}

Upvotes: 1

Related Questions