Learn to implement bootstrap

0
3433

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. bootstrap

  3. Now click on the Download Bootstrap button the following window will pop up .
  4. learn to implement bootstrap

  5. Now under the Bootstrap menu click the Download Bootstrap button .
  6. Thus, a zip file will get downloaded which you can extract.After extracting you will have the following contents in it:
  7. contents of boot strap file

  8. Now create index.html file in the same folder and open it with Notepad++ or any other text editor .
  9. 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 .
  10. v4

  11. 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 .
  12. Bootstrap theme

  13. Now click on the second theme, right click on it and click on the view page source.
  14. You will get the source code which you have to copy and paste it in the index.html file .
  15. Here are the screen shots for it :
  16. getting started boot strap
    v7

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

  19. Here are the contents of the boot folder :
  20. learn to implement bootstrap

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

  23. Here is the downloaded html source code :
  24. Now just navigate to the head section and in the provide the proper directory path
  25. For example in the above code perform the following changes in the head section :
  26. boot strap

  27. 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 .
  28. v13

  29. Now open your index.html file in the browser and you will have the following output:
  30. bootstrap
    learn bootstrap
    learn to implement bootstrap
    bootstrap

  31. 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.
  32. You can open your website in any browser such as IE, safari, Chrome ..etc
  33. Thus your website will be a responsive one.
  34. Output is shown below :
  35. bootstrap
    implementation of bootstrap
    bootstrap output
    bootstrap

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here