How to make Twitter bootstrap modal full screen

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.

score 326 · Accepted Answer · edited Mar 08 '16 at 19:35

326

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

edited Mar 08 '16 at 19:35

David Underhill

15,896
7
53
61

answered Aug 29 '13 at 23:04

Chris J

3,828
1
20
17

15

I'd also add `margin: 0` to `.modal-dialog`. – mllamazares May 02 '14 at 11:06
11

BTW: `.modal-content` 's hight break when content overflows at the bottom and scrolling down. It should be `min-height: 100%; height: auto;` – Yanick Rochon Apr 16 '15 at 20:00
3

If designing for a mobile app, you can put Chris' CSS inside a media query to have normal modal width for wider screens @media(max-width: 768px) { ... } – Nicolas Connault Apr 07 '16 at 13:30
you can also add .modal { padding: ...px } if you need "almost" full screen modal – andrii Apr 29 '16 at 06:39
Does this also work for printing? I am struggling to print a modal to a full page: http://stackoverflow.com/questions/41889627/print-modal-content-as-full-a4-page – Reise45 Jan 29 '17 at 08:44
I think only `.modal-dialog { width: 100%; }` is okay. It worked for me. – Ahmed Syed Feb 06 '17 at 11:23
Might be looking for this https://noreiller.github.io/bootstrap-modal-carousel/modal-fullscreen.html – kshirish Sep 20 '17 at 10:50
14

`.modal-dialog` also needs `max-width: 100%;` for **bootstrap 4** – Anand Rockzz Mar 06 '18 at 03:18

score 83 · Answer 2 · edited Jul 13 '21 at 11:26

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;
  }

}

In Bootstrap 4, if you're using `.modal-dialog-scrollable` on the element with `.modal-dialog`, you may want to add the following to the above v4 SCSS code to force the modal to extend the full height of the viewport: `.modal-dialog.modal-dialog-scrollable { max-height: 100%; }` and `.modal-dialog.modal-dialog-scrollable .modal-content { max-height: 100%; }` — etipaced, Feb 13 '21 at 02:21

score 28 · Answer 3 · answered Apr 03 '14 at 10:11

28

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%;
}

answered Apr 03 '14 at 10:11

Esteban

1,496
17
22

1

a more correct answer that retains the feel of model with rounded corners, the accepted answer presents an overlay layer instead of modal – Clain Dsilva Oct 31 '16 at 06:33
If the modal is occupying the full screen, it would look horrible (IMHO) if you have round corners around it. – Rafael Herscovici Nov 08 '18 at 11:54

score 18 · Answer 4 · answered Feb 20 '18 at 06:17

18

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%;
}

answered Feb 20 '18 at 06:17

A. Morel

9,210
4
56
45

score 13 · Answer 5 · answered Mar 15 '19 at 10:08

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">

score 12 · Answer 6 · edited Aug 27 '15 at 01:20

12

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.

edited Aug 27 '15 at 01:20

Irwin

12,551
11
67
97

answered Aug 25 '13 at 19:08

micjamking

2,183
1
21
24

what is .fullscreen ? I included the css in #myModal it worked for the width but not the height. – Hrishikesh Sardar Aug 25 '13 at 19:18
`.fullscreen` is a class I created to solve the issue, it is not included in Bootstrap. Can you post a sample of your code on [JSFiddle](http://jsfiddle.net/) or [CodePen](http://codepen.io/)? I can't help you without seeing your code. – micjamking Aug 25 '13 at 19:47
for add height you need to add height on model-body not on #myModal. – QasimRamzan Oct 19 '15 at 09:43

score 8 · Answer 7 · edited May 23 '17 at 12:10

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;
}

score 2 · Answer 8 · answered Jan 26 '21 at 21:49

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.

score 0 · Answer 9 · answered May 15 '15 at 01:04

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">&times;</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>

score 0 · Answer 10 · answered Jul 12 '21 at 07:37

0

.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

answered Jul 12 '21 at 07:37

Avinash

159
2
9

Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jul 12 '21 at 11:34

score 0 · Answer 11 · answered Jul 12 '21 at 08:22

**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.

score -1 · Answer 12 · answered Nov 08 '18 at 12:14

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%;
}

score -1 · Answer 13 · answered Dec 19 '18 at 16:35

.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;
}

Try to explain more clearly why this is an answer to the question. — Jeroen Heier, Dec 19 '18 at 16:54

score -1 · Answer 14 · answered Jan 08 '19 at 09:45

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">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>

How to make Twitter bootstrap modal full screen

14 Answers14

Bootstrap v5

Bootstrap v4

Bootstrap v3

Linked