Categories: Web DevelopmentServer-Side Web DevelopmentTutorials

Downloading and setting up Bootstrap

4 min read

(For more resources related to this topic, see here.)

Getting ready

Twitter Bootstrap is more than a set of code. It is an online community. To get started, you will do well to familiarize yourself with Twitter Bootstrap’s home base:

http://twitter.github.com/bootstrap/

Here you’ll find the following:

The documentation: If this is your first visit, grab a cup of coffee and spend some time perusing the pages, scanning the components, reading the details, and soaking it in. (You’ll see this is going to be fun.)
The download button: You can get the latest and greatest versions of the Twitter Bootstrap’s CSS, JavaScript plugins, and icons, compiled and ready for action, coming to you in a convenient ZIP folder. This is where we’ll start.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

How to do it…

Whatever your experience level, as promised, I’ll walk you through all the necessary steps. Here goes!

Go to the Bootstrap homepage: http://twitter.github.com/bootstrap/
Click on the large Download Bootstrap button.
Locate the download file and unzip or extract it. You should get a folder named simply bootstrap. Inside this folder you should find the folders and files shown in the
following screenshot:
From the homepage, click on the main navigation item: Get started.
Scroll down, or use the secondary navigation, to navigate to the heading: Examples. The direct link is:

http://twitter.github.com/bootstrap/getting-started. html#examples
Right-click and download the leftmost example, labeled Basic Marketing Site. You’ll see that it is an HTML file, named hero.html
Save (or move) it to your main bootstrap folder, right alongside the folders named css, img, and js.
Rename the file index.html (a standard name for what will become our homepage).

You should now see something similar to the following screenshot:
Next, we need to update the links to the stylesheets

Why? When you downloaded the starter template file, you changed the relationship between the file and its stylesheets. We need to let it know where to find the stylesheets in this new file structure.
Open index.html (formerly, hero.html) in your code editor.

Need a code editor?
Find these lines near the top of the file (lines 11-18 in version 2.0.2):
Update the href attributes in both link tags to read as follows:
Save your changes!

You’re set to go!

Open it up in your browser! (Double-click on index.html.)

You should see something like this:

Congratulations! Your first Bootstrap site is underway.

Problems? Don’t worry. If your page doesn’t look like this yet, let me help you spot the problem. Revisit the steps above and double-check a couple of things:

Are your folders and files in the right relationship? (see step 3 as detailed previosuly)
In your index.html, did you update the href attributes in both stylesheet links? (These should be lines 11 and 18 as of Twitter Bootstrap version 2.1.0.)

There’s more…

Of course, this is not the only way you could organize your files. Some developers prefer to place stylesheets, images, and JavaScript files all within a larger folder named assets or library. The organization method I’ve presented is recommended by the developers who contribute to the HTML5 Boilerplate. One advantage of this approach is that it reduces the length of the paths to our site assets.

Thus, whereas others might have a path to a background image such as this:

url('assets/img/bg.jpg');

In the organization scheme I’ve recommended it will be shorter:

url('img/bg.jpg');

This is not a big deal for a single line of code. However, when you consider that there will be many links to stylesheets, JavaScript files, and images running throughout your site files, when we reduce each path a few characters, this can add up. And in a world where speed matters, every bit counts. Shorter paths save characters, reduce file size, and help support faster web browsing.

Summary

This article gave us a quick introduction to the Twitter Bootstrap. We’ve got a fair idea as to how to download and set up our Bootstrap. By following these simple steps, we can easily create our first Bootstrap site.