Bootstrap 4 modal full screen
Per un progetto ho usato il modal di Bootstrap 4 come loading page.
Ovviamente avevo la necessità di visualizzarlo full screen.
Vi posto il codice HTML e CSS che ho usato.
Partiamo dal modal:
<div class="modal" id="modal_wait" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto text-center">
<i class="fa fa-spinner fa-5x fa-spin"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Questo il CSS:
#modal_wait {
min-width: 100%;
margin: 0;
}
#modal_wait .modal-content {
min-height: 100vh;
background-color: #fff265;
}
#modal_wait .modal-dialog {
min-width: 100%;
margin: 0;
}
Online ho visto che anche altre soluzioni proposte; a me ha funzionato solo questa, ma magari dipende dal resto della mia pagina.
Enjoy!
html css bootstrap modal
Commentami!