Bootstrap Tutorial v3 (Part 1)

Make a Responsive Website quickly and easily

1. Download Bootstrap

http://getbootstrap.com/getting-started/

  • Click on “Download Bootstrap” button (The first button of the three)
  • Unzip file

Note that there are three folders:

  1. css
  2. fonts
  3. js

2. Create Basic Template

http://getbootstrap.com/getting-started/#template

  • Copy code from the above page and paste it into a new HTML page.
  • Save page as index.html and save to your folder with the css, fonts, and js folders

3. Note that the Basic Template includes the following:

Viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser to set the viewport to the width of the device with an initial scale of 1.

Link to Bootstrap CSS file

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

HTML shiv

HTML shim for IE – Enables styling of HTML5 elements in versions of Internet Explorer prior to version 9

Add after links to CSS

 <!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

Link to jQuery library

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

4. Voilà! Here it is.

The file should look like this code below.

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

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

 <!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/html5shiv/3.7.2/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>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

4 thoughts on “Bootstrap Tutorial v3 (Part 1)”

  1. Mark Schmetzer says:

    Hello, the Download Bootstrap link is not correct.  Do you have the new link to download the file for Dreamweaver?

    Thanks!

    1. jamie says:

      Thanks for the heads up! I changed the link so it is correct now.

      1. Mark Schmetzer says:

        Thank you!

  2. sriproperty.net says:

    Nice Article, 

    Clear and to the point. 

Leave a Reply

Your email address will not be published. Required fields are marked *