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:
- Introduction to Web Development and the Holy Trinity of it
- Include Bootstrap in AngularJS using ng-bootstrap
- CSS | Website Layout
- HTML | Layout
- CSS | table-layout Property
- CSS | Grid Layout Module
- Advance CSS layout with flexbox
- CSS | Layout - Horizontal & Vertical Align
- Best way to make a d3.js visualization layout responsive
- How to hide elements in responsive layout using CSS ?
- What's new in Bootstrap v4.3 ?
- Bootstrap 4 | Tables
- Bootstrap 4 | Colors
- Bootstrap 4 | Alerts
- Bootstrap 4 | Images
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.