Learn to implement bootstrap


In this session we will study what is bootstrap and learn to implement bootstrap for creating a responsive website.
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

  • Follow the steps given below to implement bootstrap :
  1. First of all visit getbootstrap.com you will have the following view .

  2. Now click on the Download Bootstrap button the following window will pop up .

  3. Now under the Bootstrap menu click the Download Bootstrap button .
  4. Thus, a zip file will get downloaded which you can extract.After extracting you will have the following contents in it:

  5. Now create index.html file in the same folder and open it with Notepad++ or any other text editor .
  6. Again visit the getbootstrap.com and in the above menu bar select the Getting Started tab. Here we will find the basic template that we will be using to construct our website .

  7. At the right hand side you will find Basic Template just click on it and you will see an html code .Just scroll down the page and go to Examples and select the second theme from the following . You can also select the other ones based on your requirement .

  8. Now click on the second theme, right click on it and click on the view page source.
  9. You will get the source code which you have to copy and paste it in the index.html file .
  10. Here are the screen shots for it :

  11. v7

  12. For example let’s create a folder named boot which consists all the downloaded files and index.html file as shown in the image :

  13. Here are the contents of the boot folder :

  14. Now right click on the index.html file and open it with Notepad ++ or any other text editor .

  15. Here is the downloaded html source code :
  16. Now just navigate to the head section and in the provide the proper directory path
  17. For example in the above code perform the following changes in the head section :

  18. Also navigate to the end of the source code to the scripts section to provide proper route path so that the index.html file will get all the bootstrap file .

  19. Now open your index.html file in the browser and you will have the following output:

  20. learn bootstrap

    learn to implement bootstrap


  21. In the body section there are various components you can use themes as per your site requirement like Panel, Well, navigation, List Groups, Progress Bar, Alert, Thumbnail, Dropdown menu.
  22. You can open your website in any browser such as IE, safari, Chrome ..etc
  23. Thus your website will be a responsive one.
  24. Output is shown below :

  25. implementation of bootstrap

    bootstrap output


  26. Hence, we have successfully learnt how to use the bootstrap and develop an responsive website .


Please enter your comment!
Please enter your name here