How to Make Twitter Bootstrap Modal Full Screen

How to make Twitter bootstrap modal full screen

I achieved this in Bootstrap 3 with the following code:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

In general, when you have questions about spacing / padding issues, try right+clicking (or cmd+clicking on mac) the element and select "inspect element" on Chrome or "inspect element with firebug" on Firefox. Try selecting different HTML elements in the "elements" panel and editing the CSS on the right in real-time until you get the padding / spacing you want.

Here is a live demo

Here is a link to the fiddle

How to make a modal fullscreen?

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
}

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
  <b-button v-b-modal.modal1>Launch demo modal</b-button>

  <!-- Modal Component -->
  <b-modal class="test-modal" id="modal1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

CSS:

.test-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    position: fixed;
    z-index: 100000;
}

Bootstrap modal fullscreen issue

I have found a solution that works and updated my jsfiddle

.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.modal-dialog {
    position: fixed;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
}
.modal-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    box-shadow: none;
}
.modal-body {
    position: absolute;
    top: 50px;
    bottom: 0;
    font-size: 15px;
    overflow: auto;
    margin-bottom: 60px;
    padding: 0 15px 0;
    width: 100%;
}
.modal-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 60px;
    padding: 10px;
    background: #f1f3f5;
}
/* to delete the scrollbar */
/*
::-webkit-scrollbar {
    -webkit-appearance: none;
    background: #f1f3f5;
    border-left: 1px solid darken(#f1f3f5, 10%);
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: darken(#f1f3f5, 20%);
}
*/

Modal covering the entire screen of the device

Creating a full screen modal is different in the latest Bootstrap 4, than in the previous answer for Bootstrap 3.

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

Then add modal-full class to the modal:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
        ...
        </div>
    </div>
</div>

Demo: Bootstrap 4 Full Screen Modal

Bootstrap 4 full-screen modal with carousel issues in Safari

Changing your .carousel to height: 100vh; from 100% seems to work in Safari

.modal-full .modal-content .carousel {
  height: 100vh;
}

Updated fiddle

Or you could add a height: 100%; to the .carousel's parent - .modal-body.

.modal-full .modal-content .modal-body {
  padding: 0;
  height: 100%;
}

Updated fiddle 2

Bootstrap Modal not show fullscreen

Place this script at the bottom of your page, just before closing </body>.

$(window).on('load', function(){
  $('.modal.fade').appendTo('body');
})

It will effectively move your modals from wherever they are placed, making them direct children of <body>.

If this doesn't work, it means you're overriding the default CSS of .modal and you will need to produce a minimal, complete and verifiable example of your problem here or using any online snippet tool.

How to Make Twitter Bootstrap Modal Full Screen