BootStrap Introduction and Installation - GeeksforGeeks

05 May, 2022
To begin Web development you may go through this article first.
Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron
Grid System
Buttons, Glyphicons, Tables
Vertical Forms, Horizontal Forms, Inline Forms
DropDowns and Responsive Tabs
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 websites. 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. 
Reason to choose 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 that 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 ways of Installing Bootstrap. But before installing Bootstrap, we must code a basic html document on which we would install Bootstrap. Here it is,
Example: 
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Learning Bootstrap @ GeeksforGeeks.org</title>    <meta name="description" content="Hello World"></head><body>      <div> Hello World!</div>      <div> You're learning Bootstrap on Geeksforgeeks.org</div></body></html>
Method 1 (BootstrapCDN): This method of installing Bootstrap is fairly easy but it requires Internet connection. It is highly recommended that you follow this method.
Step 1: Goto getbootstrap and click Getting Started . Scroll down.
Step 2: Copy the <link> and paste it in the head section of the HTML code. 
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Learning Bootstrap @ GeeksforGeeks.org</title>    <meta name="description" content="Hello World">    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"        crossorigin="anonymous"></head><body>    <div>Hello World!</div>    <div>You're learning Bootstrap on Geeksforgeeks.org</div>    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"        crossorigin="anonymous">    </script></body></html>
Step 3:Copy the <script> tag and paste those things in the body section at bottom position like the above code.
Step 4: Bingo! You’ve installed Bootstrap on your html document. To see the changes on your document, try opening the page on a separate 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.
 
Method 2(Compiled CSS and JS): 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.
Step 1: Goto getbootstrap and click Getting Started. Click on the Download Bootstrap button and download the compiled CSS and JS. 
Step 2: A.zip file would get downloaded. Extract it and go into the distribution folder. You would see 2 folders named CSS and JS. 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>
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Learning Bootstrap @ GeeksforGeeks.org</title>    <meta name="description" content="Hello World">    <link rel="stylesheet" type="text/css"        href="css/bootstrap.min.css"></head><body>    <div> Hello World!</div>    <div> You're learning Bootstrap on Geeksforgeeks.org</div>    <script src="js/bootstrap.min.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script></body></html>
HTML 3: Open the HTML document with the browser and see the difference which bootstrap makes! This would probably not support 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.
Akanksha_Rai
sahilintern
Web technologies
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills