Beginning BootStrap (Part-1) | Introduction and Installation

To begin Web development you may go through this article first.

  1. Grid System
  2. Buttons, Glyphicons, Tables
  3. Vertical Forms, Horizontal Forms, Inline Forms
  4. DropDowns and Responsive Tabs
  5. Progress Bar and Jumbotron

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. It solves many problems which we had once, one of which is the cross browser compatibility issue. Nowadays, the websites are perfect for all the browsers (IE, Firefox and Chrome) and for all sizes of screens ( Desktop, Tablets, Phablets and Phones). All thanks to Bootstrap developers -Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project.
Why Bootstrap?
• Faster and Easier Web-Development.
• It creates Platform-independent web-pages.
• It creates Responsive Web-pages.
• It’s designed to be responsive to mobile devices too.
• It’s Free! Available on www.getbootstrap.com

Websites which were built with a lot of CSS and JavaScript can now be built with a few lines of code using Bootstrap. Bootstrap comprises of mainly three components:
• CSS
• Fonts
• Javascript

Installing Bootstrap:

There are two ways in which we can install Bootstrap. I will talk about both the ways of Installing Bootstrap. But before installing Bootstrap, we must code a basic html document on which we would install Bootstrap. Here it is,



1
We can also open this file with a browser to see this page. Now,we’re all set to install Bootstrap.

Method A

This method of installing Bootstrap is fairly easy but it requires Internet connection. It is highly recommended that you follow this method.

1. Goto www.getbootstrap.com and click Getting Started . Scroll down.

2

2. Copy the first two paragraphs and paste it in the head section of the html code.

4

3. Copy the 3rd paragraph from the website and paste it just before the ending the body section of the html code.

4. This is the last step. We need to download the latest jQuery version and copy the link in the body section. Here, I have the link which need to write before the bootstrap.min.js script.

<script src= http://code.jquery.com/jquery-2.1.4.min.js> </script>

5. Bingo! You’ve installed Bootstrap on your html document. To see the changes on your document, try opening the page on a seperate tab of your browser and you can easily notice the difference between the two codes. Though, not much of difference can be felt till now, but it would be apparent in the later parts of the article. Here, the one on the left is without bootstrap and the one on the right is with bootstrap installed.5



Method B

This method of installing bootstrap is also easy but it can work offline ( doesn’t require an internet connection ) but it might not work for some browsers.

1. Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.

7

2. A.zip file would get downloaded. Extract it and go in the distribution folder. You would see 3 folders named CSS, JS and FONTS. You can make your html file there and then you must paste these links in their respective sections.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

6

3. Open the html document with the browser and see the difference which bootstrap makes! This would probably not support for higher versions of Internet Explorer(8+) and for them we need to download additional files which is cumbersome. So, It is highly recommended to follow Method A which is really very simple.

This is just the installation and some basic knowledge on Bootstrap. We will be dealing with the other topics in the next part. Keep Learning!

 

Article By Harshit Gupta: harshit
Kolkata based Harshit Gupta is an active blogger having keen interest in writing about current affairs, technical Blogs, stories, and personal life experiences. Besides passionate about writing, he also loves coding and dancing. Currently studying at IIEST, he is an active blog contributor at geeksforgeeks. You can reach him at https://in.linkedin.com/pub/harshit-gupta/102/b71/605

If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.



My Personal Notes arrow_drop_up


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.