Make Bootstrap Modal Fullscreen – Sometimes we need to make bootstrap modal fullscreen. There are many ways to make modal fullscreen you can override the default css or you can create new class to add the fullscreen property. Here in this tutorial we are going to explain how you can make modal fullscreen. You can use our online editor to run & edit the example code online.
Make Bootstrap Fullscreen Modal
Add the following class to make the bootstrap modal fullscreen. It will change the default height, width of the modal along with margin.
Css Part –
Create the following css class and style-
Make Bootstrap Fullscreen Modal Example:
|
|
Html Part –
Add the above created class in Modal as below –
Make Bootstrap Fullscreen Modal Example:
<!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade " role="dialog">
<div class="modal-dialog fullscreen">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
</div>
<div class="modal-body">
<p>Here the description starts here........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
|
The above class will make the default modal as fullscreen. Add the class fullscreen to the modal. If you run the above example it will produce the output something like this –
More About Fullscreen Modal
Let us have a look more about the fullscreen Modal.
If you want to make the content area add the fullscreen to the content area as below –
Make Bootstrap Fullscreen Modal Example:
<!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade " role="dialog">
<div class="modal-dialog fullscreen">
<div class="modal-content fullscreen">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
</div>
<div class="modal-body">
<p>Here the description starts here........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
|