Practicing App Like Page Layout with WP Bootstrap Starter Theme

This is a little practice for app-like page layout in WordPress with WP Bootstrap Starter Theme. Don’t forget to create child theme first.

~/wp-content/themes/wp-bootstrap-starter-child/style.css :

body, .site, .content-area, .site-main, 
.site-main .container, article, .entry-content {
	height: 100vh;
}

.entry-content {
	margin: 0;
}

.custom-layout-header a {
    margin: 1rem;
	padding: 1rem;
}

.custom-layout-footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

---

Home Page :

<div class="container-fluid custom-layout-home h-100">
    
    <header class="custom-layout-header d-flex justify-content-center  ">

        <div><a href="#">Menu Item</a></div>
        <div><a href="#"><img src="logo.png" alt="logo.png" title="logo.png"></a></div>
        <div><a href="#">Menu Item</a></div>

    </header>
    <div class="custom-layout-body d-flex align-items-center h-100 justify-content-center">

        <div class="">body</div>

    </div>
    <footer class="custom-layout-footer ">

        <div class="d-flex justify-content-center">
            <div>footer</div>
        </div>

    </footer>

</div>