Bootstrap fullscreen layout with 100% height

Question

I want to develop a kiosk-app which should stretch itself to 100% of the complete touch-screen.

When I\'m nesting for each application-view/template the rows and co

Answer 1

Here's an answer using the latest Bootstrap 4.0.0. This layout is easier using the flexbox and sizing utility classes that are all provided in Bootstrap 4. This layout is possible with very little extra CSS.

#mmenu_screen > .row {
    min-height: 100vh;
}

.flex-fill {
    flex:1 1 auto;
}


    

        

            

                

                    
                    Booking
                
            
            

                

                    
                    Info
                
            
        
        

            
            Action
        
    

Demo

The flex-fill and vh-100 classes are included in Bootstrap 4.1 (and later)