October 15th, 2019 
Nilesh Chaurasia How to Install or Use Bootstrap 3 in HTML 5 Website
Bootstrap is a front-end CSS and jQuery framework. It includes CSS, jQuery and font files. The importance of Bootstrap is that it will help in fast design of responsive websites.
To use Bootstrap in your web design project you have to embed its CSS and jQuery files in the HTML document.
To embed external CSS in the HTML file you have to use <link> tag and to add jQuery file you have to use <script> tag.
In the link and script tag you need to specify the files having CSS and jQuery code respectively.
The location of these files may be at your own computer or at a remote computer, both will work.
If you need a local copy of Bootstrap files you can download from official website.
Link: You can download local copy of bootstrap files from https://getbootstrap.com/.
You can also download the Bootstrap’s CSS and JS files from their official website and include them in your project. There are two versions available for download, compiled Bootstrap and Bootstrap source files.
There are many options on the official website, but for the first test, the best option is the pre-compiled version of files. If you are an advanced developer you can use SASS version to customize the designs.
Compiled download contains compiled and minified version of CSS and JavaScript files for faster and easier web development. The compiled version, however, doesn’t include any optional JavaScript dependencies such as jQuery and Popper.js. Whereas, the source download contains original source files for all CSS and JavaScript, along with a local copy of the docs.
Download and unzip the compiled Bootstrap. Now if you look inside the folders you’ll find it contains the compiled CSS and JS files (bootstrap.css, bootstrap.js), as well as the compiled and minified CSS and JS (bootstrap.min.css, bootstrap.min.js). Use the bootstrap.min.css and bootstrap.min.js files.
Now in this tutorial I am assuming that you have downloaded pre-compiled version in you computer disk.
Use this code statement in head element of HTML document to embed Bootstrap CSS
Use this code statements in head element of HTML document to embed Bootstrap jQuery file
Note: Bootstrap JS require jQuery library. And for proper functioning of Bootstrap JS components, you have to download and add jQuery first in your HTML.
Warning:In the above code example we are assuming that you have downloaded the bootstrap.css and bootstrap.js files in the css and js folder respectively.
Caution: Bootstrap JS require Bootstrap CSS but if you are not using JS component you can omit the embedding the bootstrap.js. And also omit jQuery.js if you are not using jQuery features in your web page.
HTML 5 Code Example with Bootstrap 3
The complete minimal code template for HTML 5 with Bootstrap 3 is given in this example, this code is a good starting point to develop your own Bootstrap ready HTML web page.
Example – Bootstrap 3 Enabled HTML 5 Code Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial for Beginners</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!-- navigation bar will be here -->
<!-- container bar will be here -->
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
In the above code example we have embedded both CSS and jQuery file of Bootstrap in the HTML 5 basic page structure. In this example we have used local Bootstrap files.
How to Use Bootstrap 3 classes in HTML
In this code we will show how to use Bootstrap 3 pre-defined classes in your HTML document to achieve certain effects.
There is a class called text-center to align text center, we are using this class in the h1 HTML tag.
Example – Bootstrap 3 Uses in HTML 5 Template to align text center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial for Beginners</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.centerthetext
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="text-center">Heading 1 with Bootstrap text-center class</h1>
<h1>Heading 1 without any class</h1>
<h1 style="text-align:center;">Heading 1 with inline CSS to make text align center</h1>
<h1 class="centerthetext">Heading 1 with internal CSS with class name centerthetext</h1>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
In the above code example, we have used four h1 tags with different design specifications. In the first, we have used Bootstrap class text-center to center align the text.
In the second, we have not used any classes and text is aligned left, which is default alignment. In the third, we have used inline CSS and in the fourth case, we have used local class defined in the head section of the web page.
The above example shows that Bootstrap 3 is a way to web design easy and fast.
Note: You can also use the minified version of CSS and JS files of Bootstrap to improve the performance of your website and saves the precious bandwidth because the minified version files are smaller in size.
Posted in 
Tags: 
Greetings! Very helpful advice in this particular post! It is the little changes that produce the largest changes. Thanks a lot for sharing!|
It is not my first time to go to see this website, i am browsing this web page dailly and take pleasant data from here daily.|
I agree with your details , superb post.
Hi there! Someone in my Myspace group shared this website with us so I came to give it a look. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Excellent blog and terrific design.