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.

Vertical align in Bootstrap 4

La documentazione di Bootstrap è ottima, tranne in alcuni punti.

Uno di questi è il vertical align; anche se ci sono delle classi preposte, non sono di facile lettura.

Oggi vi propongo un mio esempio che sto usando in produzione; ovviamente possono esserci altri modi.

Cambiare l'opacità nei modal di Bootstrap 4

Il modal di Bootstrap 4 crea un'area grigia, con classe CSS modal-backdrop, che dovrebbe aiutare l'utente indicandogli l'area in cui cliccare per uscire.

In un sito mi è stato chiesto di rimuovere l'area grigia.

Aprire il modal di Bootstrap 4 dal lato

Il modal di Bootstrap 4 è un componente a dir poco usato.

Solo che di default, l'effetto fade è solo dal top.

Io avevo bisogno di visualizzarlo dal lato; nel mio caso il destro, ma visualizzarlo dal lato sinistro richiede poche modifiche.

Levare le frecce dalla navbar di Bootstrap

La navbar di Bootstrap ci arriva praticamente completa di tutto.

Anche dei sottomenu volendo; basta copiare gli esempi dalla documentazione.

Impostare l'altezza full page in Bootstrap 4

In pratica ho la necssità di impostare che i div / la pagina sia sempre al 100% della finestra.

Voi direte, bastano queste regole CSS:

html, body, main {
    height:100%;
    min-height: 100%;
}