Thursday, July 14, 2016

Implementing Bootstrap Offline

Bootstrap is a responsive framework for web development using HTML, CSS and Javascript that allows you to create a responsive and beautiful web page in minutes. There are two ways on how to implement bootstrap in your web page. The first one is using the bootstrap CDN which I already created a tutorial on how to do it. Just visit the link below.

Implementing Bootstrap Using the CDN Tutorial

The second one is using the offline version of bootstrap (We will not be using the bootstrap CDN since CDN needs an internet connection to run bootstrap). So here is a tutorial to help you start with bootstrap offline. Visit for the complete documentation and references in this tutorial.

Step # 1

Download bootstrap3.3.6 from download section. Just click the link I provided and you can select between Bootstrap, Source Code and Sass like on the picture below.

You can choose Bootstrap which contains the compiled and minified versions of CSS, Javascript and Fonts. Or you can choose Source Code which contains the CSS, Javascript and Fonts together with an offline documentation and samples of bootstrap. Download and extract the files. If you are going to choose the minified version without the documentation, your extracted file will contain css, fonts and css folders.

Step # 2

 So now you are ready to construct your first webpage using bootstrap. Create your HTML code by copying the HTML5 code below. It is found on the Basic Template under your download link from

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>

<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=""></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Step # 3

Save it together with your css, js and font folders with .html file extension and your done! If you want to add some boostrap components, just visit the boostrap documentation and copy the codes and paste it inside your body tag.

Hope this works for you too....

Implementing Bootstrap Offline

No comments:

Post a Comment