How To Use Bootstrap 3

bootstrapFirst of all, we need to download Bootstrap from the official website, Click Here.  At the time of this tutorial, Bootstrap v3.3.6 is available.  There are 3 folders inside Bootstrap folder; CSS, Fonts, and JS.  In CSS folder, we have bootstrap.min.css and bootstrap.css.  In JS folder, we have bootstrap.min.js and bootstrap.js.

The files containing min keyword are minified version of actual files, i.e. bootstrap.css and bootstrap.js.  This minified version is comparatively less in size because it does not contain any spaces or comments.  The non-minified version contains comments and spaces, which makes the code more readable and easy to understand.  However, both non-minified and minified versions work the same.  But for deployment, we always use minified version because it takes less space in server.

For this tutorial, we will use Notepad++ as our text editor.  Now, we need a simple HTML code which contains reference to our 3 main Bootstrap files (bootstrap.css, jquery.js, and bootstrap.js).  Sample code is give below.  Please save this file as index.html in Bootstrap folder.

<!DOCTYPE html>
<title>Bootstrap Tutorial </title>
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>