How to make Twitter bootstrap modal full screen - css

Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<%= image_tag "Background.jpg" %>
</div>
</div>
How do I make a twitter bootstrap modal popup full screen for the above code, I tried playing around with css but was not able get it the way I wanted. Can anyone please help me with it.

Answer 1

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

Answer 2

I've came up with a "responsive" solution for fullscreen modals:
Fullscreen Modals that can be enabled only on certain breakpoints. In this way the modal will display "normal" on wider (desktop) screens and fullscreen on smaller (tablet or mobile) screens, giving it the feeling of a native app.
Implemented for Bootstrap 3 and Bootstrap 4. Included by default in Bootstrap 5.
Bootstrap v5
Fullscreen modals are included by default in Bootstrap 5: https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal
Bootstrap v4
The following generic code should work:
.modal {
padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal .modal-body {
overflow-y: auto;
}
By including the scss code below, it generates the following classes that need to be added to the .modal element:
+---------------------+---------+---------+---------+---------+---------+
| | xs | sm | md | lg | xl |
| | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen | 100% | default | default | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-sm | 100% | 100% | default | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-md | 100% | 100% | 100% | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-lg | 100% | 100% | 100% | 100% | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-xl | 100% | 100% | 100% | 100% | 100% |
+---------------------+---------+---------+---------+---------+---------+
The scss code is:
#mixin modal-fullscreen() {
padding: 0 !important; // override inline padding-right added from js
.modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-body {
overflow-y: auto;
}
}
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-down($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.modal-fullscreen#{$infix} {
#include modal-fullscreen();
}
}
}
Demo on Codepen: https://codepen.io/andreivictor/full/MWYNPBV/
Bootstrap v3
Based on previous responses to this topic (#Chris J, #kkarli), the following generic code should work:
.modal {
padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal .modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
If you want to use responsive fullscreen modals, use the following classes that need to be added to .modal element:
.modal-fullscreen-md-down - the modal is fullscreen for screens smaller than 1200px.
.modal-fullscreen-sm-down - the modal is fullscreen for screens smaller than 922px.
.modal-fullscreen-xs-down - the modal is fullscreen for screen smaller than 768px.
Take a look at the following code:
/* Extra small devices (less than 768px) */
#media (max-width: 767px) {
.modal-fullscreen-xs-down {
padding: 0 !important;
}
.modal-fullscreen-xs-down .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-fullscreen-xs-down .modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
}
/* Small devices (less than 992px) */
#media (max-width: 991px) {
.modal-fullscreen-sm-down {
padding: 0 !important;
}
.modal-fullscreen-sm-down .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-fullscreen-sm-down .modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
}
/* Medium devices (less than 1200px) */
#media (max-width: 1199px) {
.modal-fullscreen-md-down {
padding: 0 !important;
}
.modal-fullscreen-md-down .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-fullscreen-md-down .modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
}
Demo is available on Codepen: https://codepen.io/andreivictor/full/KXNdoO.
Those who use Sass as a preprocessor can take advantage of the following mixin:
#mixin modal-fullscreen() {
padding: 0 !important; // override inline padding-right added from js
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
}

Answer 3

The chosen solution does not preserve the round corner style.
To preserve the round corners, you should reduce the width and height a little bit and remove the border radius 0. Also it doesn't show the vertical scroll bar...
.modal-dialog {
width: 98%;
height: 92%;
padding: 0;
}
.modal-content {
height: 99%;
}

Answer 4

For bootstrap 4 I have to add media query with max-width: none
#media (min-width: 576px) {
.modal-dialog { max-width: none; }
}
.modal-dialog {
width: 98%;
height: 92%;
padding: 0;
}
.modal-content {
height: 99%;
}

Answer 5

for bootstrap 4
add classes :
.full_modal-dialog {
width: 98% !important;
height: 92% !important;
min-width: 98% !important;
min-height: 92% !important;
max-width: 98% !important;
max-height: 92% !important;
padding: 0 !important;
}
.full_modal-content {
height: 99% !important;
min-height: 99% !important;
max-height: 99% !important;
}
and in HTML :
<div role="document" class="modal-dialog full_modal-dialog">
<div class="modal-content full_modal-content">

Answer 6

The following class will make a full-screen modal in Bootstrap:
.full-screen {
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
}
I'm not sure how the inner content of your modal is structured, this may have an effect on the overall height depending on the CSS that is associated with it.

Answer 7

The snippet from #Chris J had some issues with margins and overflow.
The proposed changes by #YanickRochon and #Joana, based on the fiddel from #Chris J can be found in the following jsfiddle.
That's the CSS code that worked for me:
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}

Answer 8

For bootstap 4.5:
I just copied this code from bootstap 5.scss to my sass and its amazing:
#media (max-width: 1399.98px)
.modal-fullscreen-xxl-down
width: 100vw
max-width: none
height: 100%
margin: 0
.modal-fullscreen-xxl-down .modal-content
height: 100%
border: 0
border-radius: 0
.modal-fullscreen-xxl-down .modal-header
border-radius: 0
.modal-fullscreen-xxl-down .modal-body
overflow-y: auto
.modal-fullscreen-xxl-down .modal-footer
border-radius: 0
For html:
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-xxl-down">
...
</div>
Its all about controling margin, width and height of the right div.

Answer 9

You need to set your DIV tags as below.
Find the more details > http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling
</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="container">;
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Modal Title</h3>
</div>
<div class="modal-body" >
Your modal text
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 10

.modal {
padding: 0 !important;
}
.modal .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal .modal-body {
overflow-y: auto;
}
This is way perfect working in my case Thanks alot

Answer 11

**If you want to have the Modal Bigger than the normal Then No need of writing the .css code, we can directly write the class of bootstrap modal **
<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
Only modal-dialog modal-xl and done.

Answer 12

My variation of the solution:
(scss)
.modal {
.modal-dialog.modal-fs {
width: 100%;
margin: 0;
box-shadow: none;
height: 100%;
.modal-content {
border: none;
border-radius: 0;
box-shadow: none;
box-shadow: none;
height: 100%;
}
}
}
(css)
.modal .modal-dialog.modal-fs {
width: 100%;
margin: 0;
box-shadow: none;
height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
border: none;
border-radius: 0;
box-shadow: none;
box-shadow: none;
height: 100%;
}

Answer 13

.modal.in .modal-dialog {
width:100% !important;
min-height: 100%;
margin: 0 0 0 0 !important;
bottom: 0px !important;
top: 0px;
}
.modal-content {
border:0px solid rgba(0,0,0,.2) !important;
border-radius: 0px !important;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
height: auto;
min-height: 100%;
}
.modal-dialog {
position: fixed !important;
margin:0px !important;
}
.bootstrap-dialog .modal-header {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
#media (min-width: 768px)
.modal-dialog {
width: 100% !important;
margin: 0 !important;
}

Answer 14

Use This:
.modal-full {
min-width: 100%;
margin: 0;
}
.modal-full .modal-content {
min-height: 100vh;
}
and so:
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog modal-full">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">hi</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>