Bootstrap 4 | Holy Grail Layout

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 :

  1. A page with a header, footer, and three responsive fluid columns.
  2. The center column contains the main content.
  3. Left & right columns contain contents for ads/navigation.
  4. They should require minimal markup.
  5. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Here, you are provided button 'Toggle' to hide & show content 
to 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>                    

chevron_right


Output:

  • When Content is Hidden:
  • When Content is Shown:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.