Bootstrap - Introduction

Bootstrap

Next →

This is an introduction to Bootstrap framework tutorial.

What is Bootstrap?

Bootstrap is one of the most popular HTML, CSS and JS framework for developing responsive websites.

What is Responsive website?

A responsive website is a website that adapts to any screen size.

Get Bootstrap

To download the latest release of Bootstrap framework visit their official website by clicking here.

You can also check their GitHub repository for latest code.

Requirement

In order to follow this tutorial we will need the following softwares.

Text editor to write our code. (Example: SublimeText, Atom, Brackets etc.)
We can also use IDE like NetBeans, Eclipse or WebStorm etc.
Web browser like Chrome, Safari, Firefox, Edge etc. to check the result.
Bootstrap files downloaded from their website.
jQuery use v1.11 or above (check their website for latest updates)

Prerequisite

In order to understand this tutorial on Bootstrap it is assumed that you are familiar with of the following.

Project structure

We will be using the following project structure in this tutorial.

Our project is called bootstrap-project.

bootstrap-project
|
+-- css
|
+-- js
|
+-- plugins
|   |
|   +-- bootstrap
|
+-- index.html

In the above structure we have a css that will contain all our stylesheet files. We have a js folder that will hold the javascript files. And we have a plugins folder which holds the bootstrap files. Inside the project folder we have an index.html file which holds the basic basic Bootstrap template.

I will put all the code that we are going to write in this tutorial series in my GitHub repository bootstrap-project.

Bootstrap template

Open the index.html file and write the following code.

<!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 Template</title>

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

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn&apost work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>

	<h1>Hello World</h1>
	
	<!-- javascript -->
	<script src="js/jquery.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

In the above code we have set the DOCTYPE to html and language of the page to en English.

In the head we have included the bootstrap.min.css file which is the stylesheet file of Bootstrap.

Inside the body just before the closing </body> tag we have include jquery file and then bootstrap.min.js file. It is important to include the jQuery file before Bootstrap javascript file as the later depends on jquery.

Now, if we open the index.html page in the browser we will get the following output.

Alright guys this is the end of this introduction to Bootstrap tutorial. I hope to see you guys in the next tutorial. Have fun :-)

Next →