Adding Bootstrap to Your Project

So, now that I have your attention, how do we add this magic to our projects?

Well, first off, it's only CSS and JavaScript so you only need to attach them in the usual way by adding links and script tags into your HTML code.

However, to get the best bang for your buck, there is a defined way that the TWB folks recommend you wire things up. More on that in a moment.

First things first. Let's head over to the TWB site and download what we need.

Note: At the time this book was written, Bootstrap Version 2 was the current release and Version 3 was still in testing. Since then, however, Version 3 is now out of testing and Version 2 is no longer as widely used. This book is written using the Version 2 CSS classes, so if you are using Version 2 then all should be fine. If, however, you are using Version 3, you must be aware that there have been some major changes to the names of some of the CSS rules. Fortunately, the creators of the framework have made a conversion chart that shows exactly what has changed. This conversion chart can be found at http://getbootstrap.com/getting-started/#migration. The original Version 2 documentation is still available but it‘s in a subfolder of the site (as shown below).

The official Twitter Bootstrap site can be found at http://www.getbootstrap.com.

However, as mentioned earlier, this will take you to the new Version 3 portal. To find the Version 2 documentation, you need to go to http://www.getbootstrap.com/2.3.2.

If you have found the right place, then you should see something like the following:

Twitter Bootstrap 2.3.2 home page

From here, if you click the big blue Download Bootstrap button, it will download the main, full, uncustomized zip file that contains everything you will need to use TWB.

Download Choices

Just like many packages, TWB can be customized in many different ways.

One of its strengths is that the entire framework is built using "Less", the CSS preprocessor. With "Less," you can define variables and constants in your CSS code which can then be substituted at build/deploy time to make system-wide changes to the look and feel of your project.

This means you could, for instance, define something as Orange = #FF6000.

Then, you could refer to it in other areas of your code in the following manner:

background-color: Orange;

border: 1px dashed Orange;

Or something similar.

The customization page on the TWB site allows you to tweak all of the values it uses for things such as sizes, colors, fonts, and much more, as well as choose exactly which modules do or do not get added to the final download.

For now, however, we are just going to use the download that you can get from the blue button. We'll come back to what can and cannot be customized later on.

If you've already clicked the download button, then in your downloads folder you should now have a file called Bootstrap.zip.

If you click on this file, it should open in whatever application on your system handles zip archive files. I'm running on Windows 7 and using 7-Zip.

Once your zip file manager opens, you should see a number of folders similar to the following image:

Zip client showing Bootstrap download

The CSS folder contains the core TWB style sheets. Note that these are already preprocessed and have had any "Less" commands in them turned into real CSS statements.

The JS folder contains the core TWB JavaScript files. The files in here will be different if you've done a custom download and opted not to include some of the features TWB provides.

The IMG folder contains graphics files that TWB requires in order to display the small bitmap icons it has as part of its package.

TWB has definitions in its CSS files at approximately lines 2285 and 2309; these definitions show that the IMG folder needs to be in the same folder as the CSS. If you need to change the location, you will also need to change the rules in the CSS file.

Personally, I generally remove any path info, then place the files in the same folder as my CSS files. However, for now, we'll just make the assumption that all three folders will be in the root of your website.

The Individual Files

CSS

In the CSS folder, you'll find four different files. These should be as follows:

The “minified” versions are as expected: they are the reduced size versions of the style sheets so as to reduce download time when your site is accessed from a remote browser. The non-minified versions are full-fat, complete with comments, white space, and everything else.

The CSS comes in two varieties. The first is just a standard, non-responsive version. This style sheet defines the grids, layouts, fonts, and everything else that TWB documents. However, it does not provide rules that allow for the layout to fluidly resize when your website is viewed on a mobile device (whether it’s a tablet, smartphone or other reduced-size display).

The "responsive" version, on the other hand, includes the extra bits needed to add this to your layout.

Typically, you'd include the main style sheet while you design your layout. Then, once it's finished, you'd include the responsive rules just after your main CSS link. This will override those rules in the main sheet that it needs to, enabling the responsive features for your site.

In the new Version 3 build, this is all now built in, as Version 3 has a mobile-first policy. It’s expected that you will work the opposite way around.

We won't be dealing with the responsive stuff until later in the book so, for now, the only one you really need to pay any attention to is the main style sheet.

JS

In the JS folder, you should (if you're using the main uncustomized download) find the following files:

Just as with the CSS, the minified file is a reduced-size version designed for the deployed version of your website. The main JS file is the only one needed if you have not decided to customize. If you’re using a customized download, then you may find separate modules in here such as Modal.js or ScrollSpy.js, but I generally don't bother customizing the JS stuff as it’s much easier to maintain in one file.

IMG

As previously mentioned, you should find two PNG files in here. These are the glyph icons, one set is black, the other set is white. They are used to render the icons that are provided with the framework.

Before we move on, copy the three folders from your zip file, as is, to the same folder that you'll be creating your base HTML files and templates in. In my case, that looks something like this:

Folder view showing layout of Bootstrap folders

The Recommended Way to Add the Files to Your Project

So, now we finally get to the good part.

As I mentioned before, the folks at TWB recommend you use the following HTML 5 code as a base for all your TWB-based projects:

Code Sample 1: Twitter Bootstrap basic code

As you can see in the previous code example, you'll also need to download and add jQuery to your project. If you're not using any of the JS features in TWB, you won't need this but it's highly recommended that you do. I won’t put the details in here; however, there's an excellent jQuery book in the Syncfusion e-book library and plenty of other information online on using it.

Once you have the files downloaded, create a file in your project folder and name it helloworld.html, then copy the code in previous code sample into this file using a text editor of your choosing.

Change the following line:

To the following:

Then load the helloworld.html file into your browser. If everything has worked as expected, you should be greeted by something that looks like the following:

Helloworld.html displayed in the Chrome browser

Congratulations! You've just created your first Twitter Bootstrap-enabled web page.

There's much more to come between here and the end of this book, and during the course of the various chapters we'll create several files in our project folder.

All pages we create, however, will be derived from the template shown above. From this point on, whenever I create a file, I will assume that you will create the new file and then copy and paste the base template code above into it.

Because of this, I'll no longer present the code in my samples, and will show only the HTML code for the part of TWB that I'm demonstrating.

To make things easier, you may want to do what I have done, and that is to copy helloworld.html to a file such as template.html. Then, when you need to create a new file, all you then need to do is copy your template, rename it, and then load it into your text editor.

Because everything we'll be doing here is normal basic text, any simple text editor will do. In my case I'm using Ultra Edit and the Visual Studio editor, but this is purely for things like the IntelliSense and color/syntax highlighting.

The examples presented in this book can be completed on any platform, using any plain text editor, to view your output. However, I strongly recommend that you use the Chrome browser.

Twitter Bootstrap requires an HTML 5-capable browser, as it uses a lot of the new HTML 5 and CSS3 features. This is not to say that any of the code presented here will not work in any other browser, but it will look best in Chrome. For the most part, everything looks okay in recent versions of Firefox and Internet Explorer, too.

Legacy browsers, however, are a totally different ballgame. There is some graceful degradation in some sections of the framework, and using things like the IE5 shim and toolkits such as Modernizr will help you get a similar look and feel in older browsers. But the TWB developers do not guarantee that everything will work exactly as anticipated in anything less than the current crop of up-to-date browsers.