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.
- When Content is Hidden:
- When Content is Shown: