How to Add Bootstrap in a 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
The bootstrap can be used in 2 ways:
- Using Bootstrap CDN Link.
- By downloading the Bootstrap file.
We can easily get the resources for both approaches from the official website. Let’s begin the discussion with the first approach.
Method 1: Using CDN links – This method of installing Bootstrap is fairly easy but it requires a stable internet connection. It is highly recommended that you follow this method.
Step 1: Goto getbootstrap and click Getting Started. There you will find the below CDN links.
Step 2: Copy the links & paste it inside the <head> tag.
<link href=”https://email@example.com/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<script src=”https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js” integrity=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>
Step 3: After completing the above steps, the code will be like the following:
At this stage, we have completed the installation process & we can now start to implement the logic.
Example: This example illustrates the use of the Bootstrap CDN link, in order to use the Bootstrap with the HTML document.
Method 2: By downloading Bootstrap – 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. Under CSS files the most important files to be used are bootstrap and bootstrap.min. Under JS files, the most important are bootstrap.min.js and bootstrap.js.
Step 3: Make a separate project folder and create an HTML file. Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.
Step 4: After completing the above steps, the final code will look like the following code example. The final code after saving files under the same folder and adding links under the head and body tag respectively.
Example: In the example, it can be observed that the downloaded files from bootstrap are included under the head and body section. Now the bootstrap classes can directly be used. As it is downloaded, thus no need for an internet connection required to load classes of bootstrap.