Bootstrap Installation Steps | Bootstrap Installation Guide

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

How to Link Bootstrap to HTML Offline -

First download the Bootstrap in one tap here then
extract this
cut the folder and
paste in the new project's public_html folder.

In the Bootstrap folder - CSS folder containing many files, In these 2 important files are bootstrap.css and bootstrap.min.css exist.

The difference betwenn these two is that bootstrap.min.css is minified css means minifying is a programming term that basically means to remove any unnecessary characters like white spaces, line break, comments etc. These characters are used to format the code and make it more eligible but these aren't required for the execution of the code. This increases the file size and increases the page loadtime, so it's advised to use minified version.

bootstrap.css is heavier than bootstrap.min.css file.

Why we use Bootstrap in HTML - Bootstrap has attained a lot of light, it has become any deeveloper's choice for user interface development. So there are many reasons to use Bootstrap that are as:

A Developer's Dream
Device Friendly
Customizable
Huge Community
Development Friendly
JavaScript Aided
Well Documented
Grid System

Linking Bootstrap to HTML

We include bootstrap.min.css in the <head> section of index.html or any other filename.html using the <link> tag like

<head>

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

</head>

Now in Bootstrap folder - click on JS folder (JavaScript is used to make the page dynamic or to add effects or animation to webpage.)

Add a link to this bootstrap.min.js in the <head> section of filename.html code using the <script> element.

<head>

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

</head>

Bootstrap JavaScript code is dependent on jQuery which is javascript library that has predefined function so that developers don't need to write java script functions. we can just use the predefined function in our code.

Now download jQuery and add in our code. After downloading, place the jQuery in the bootstrap's JS folder.

Link this jQuery to filename.html

<head>

<script type="text/javascript" src="bootstrap/js/jquery-3.1.1.min.js"></script>

</head>

Another Method

The second method to include bootstrap in filename.html, is by using absolute path to the minified css and JS files of bootstrap. These absolute path points directly to bootstrap's website where this files are hosted, we add jQuery link as well in <head> section.

According to Bootstrap version-

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

or below is the latest that you can copy or add this in <head> section of your program.

<head>

</head>

For more info about Bootstrap, tap here

Bootstrap Installation Steps | Bootstrap Installation Guide