Developing the Footer Section of the Bootstrap Website | Tutorial – 8

In this tutorial we will be developing the footer section of the bootstrap website. The footer section of the website consists of 2 major parts – top footer & bottom footer
The top footer has 4 columns and the bottom footer has only 1. This is how the footer section looks like –

bootstrap footer section

Setting up everything Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

  • test code
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • jquery-3.3.1.slim.min.js
        • popper.min.js
    • css
      • style.css (our custom css file)
    • fontawesome-free-5.6.3-web
      • css
        • all.css (the only one we need to link in our project for font awesome icons)
      • js
      • etc
      • etc
    • imgs
      • logo_text_white_small.png
    • default.html

If you already have the entire code folder from the previous tutorial, then the only changes you have to do is to make the changes that needs to be done in the default.html page and style.css –

default.html page –
style.css page –
YouTube video tutorial –

Leave a Reply

Your email address will not be published. Required fields are marked *