The Holy Grail Layout is a classic CSS problem in web development. Although there are a lot of creative solutions developed in HTML and CSS, the problem faced was that it involved sacrifices where enriching one feature is often compromised at the expense of the others. Modern frameworks such as Bootstrap 4 provides utilities for implementing this layout easily. Some of the requirements in this design layout are :
- A page with a header, footer, and three responsive fluid columns.
- The center column contains the main content.
- Left & right columns contain contents for ads/navigation.
- They should require minimal markup.
- Footer should ‘stick’ to the bottom of the page when content is scanty.
Approach: We are going to use Bootstrap 4 to implement a simple layout for the same. The components we are directly going to use to implement this design are :
- Responsive Navbar
- Fluid Grid System BS4 provides a responsive layout system compatible with all devices.
- Responsive margin and padding utility classes Properties like margin and padding can be applied directly using utility classes.
- Responsive Footer (with few tweaks as per requirements) Flex CSS property used can be read here.
To learn about BS4, you can read the documentation here.
Solution:
HTML
<!-- Here, you are provided button 'Toggle' to hide & show contentto help you understand how sticky footer with flex is working. --><!DOCTYPE html><html lang="en">
<head>
<!-- meta adjustments -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Imported libraries using CDN -->
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
<!-- CSS configuration for the document -->
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.main {
flex: 1 0 auto;
}
h1 {
color: white;
}
p {
background-color: #efece9;
border-radius: 4px;
padding-left: 8px;
}
.card {
border-radius: 12px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.card-header:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 1px solid floralwhite;
}
.card-body {
min-height: 160px;
}
.card-footer {
padding-bottom: 0px;
}
footer {
flex-shrink: none;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-light justify-content-center">
<span class="navbar-brand mb-0 h1">
GeeksforGeeks
</span>
</nav>
<!-- Body Content -->
<div class="container-fluid main">
<div class="row">
<!-- Navigation/Other Links -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>DSA Course</p>
<p>Machine Learning</p>
<p>Front End Course</p>
</div>
</div>
</div>
</div>
<!-- Content Panel -->
<div class="col-sm-8">
<div class="container">
<div class="card w-100">
<div class="card-header">
<button class="btn btn-success
btn-block">
Toggle for Langugaes
</button>
</div>
<!-- This is the content deciding
the nature of the footer -->
<div class="card-body content">
<p> </p>
<p> C </p>
<p> C++ </p>
<p> Java </p>
<p> Python </p>
<p> C# </p>
<p> JavaScript </p>
<p> jQuery </p>
<p> SQL </p>
<p> PHP </p>
</div>
</div>
</div>
</div>
<!-- Advertisement -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>Adv - 1</p>
<p>Adv - 2</p>
<p>Adv - 3</p>
<p>Adv - 4</p>
<p>Adv - 5</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<!-- Footer ('flex-shrink' property applied here)-->
<footer class=" bg-success">
<div class="container text-center">
<small style="color:white;">
<b>GeeksforGeeks: </b>
A Computer Science Portal for Geeks </small>
</div>
</footer>
<!-- jQuery implementation for showing and hiding Content -->
<script>
$(document).ready(function () {
$('button').click(function () {
$('.content').toggle('slow');
});
});
</script>
</body>
</html>
|
Output:
-
When Content is Hidden:
-
When Content is Shown: