Bootstrap Tutorial - Bootstrap Setup

In this tutorial we will learn how to create a basic Bootstrap template using the Twitter Bootstrap v3.0 compiled version.

Downloading the Bootstrap Files

Bootstrap has two versions available for download, compiled Bootstrap and Bootstrap source files.

Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster web development

The source version contain original source files for all CSS and JavaScript, along with a local copy of the docs.

We will use the compiled Bootstrap files. Here is the download link.

http://getbootstrap.com/

File Structure

Once downloaded the compiled Bootstrap, unzip the compressed folder. You'll find the following file structure and contents.

bootstrap/
    +-- css/
    |   +-- bootstrap.css
    |   |-- bootstrap.min.css
    |   |-- bootstrap-theme.css
    |   |-- bootstrap-theme.min.css
    +-- js/
    |   |-- bootstrap.js
    |   |-- bootstrap.min.js
    +-- fonts/
        |-- glyphicons-halflings-regular.eot
        |-- glyphicons-halflings-regular.svg
        |-- glyphicons-halflings-regular.ttf
        |-- glyphicons-halflings-regular.woff

The compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), and compiled and minified CSS and JS (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) in the fonts folder. These fonts file includes 200 icons from the Glyphicon Halflings set.

Please note that all JavaScript plugins require jQuery to be included.

Creating Web Page with Bootstrap

Open code editor and create a new HTML file as follows.

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

To make this HTML file a Bootstrapped template, include the appropriate Bootstrap CSS and JS files.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

We include JavaScript files at the bottom of the page - before closing of the <body> tag (i.e. </body>) to improve the performance of your web pages.

Pay attention to the relative path of the css and Javascript.