Developing Top Header Section of the Bootstrap Website | Tutorial – 6

In this bootstrap framework responsive website development tutorial we will develop the top header section of our portfolio website.
We will learn –

  1. How to use external CSS file to add styling
  2. How to use bootstrap spacing utilities or responsive padding and margin
  3. How to use the fontawesome icons
  4. How to use the bootstrap grid system
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
    • default.html

If you already have the entire code folder from the previous tutorial, then the only changes you have to do is in the default.html page and style.css page as give below –

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

Leave a Reply

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