Install Twitter Bootstrap

twitter bootstrap

Now that we know what Twitter Bootstrap is, let’s go ahead and dig deeper in to the framework so we can make use of all it has to offer. There is a little bit of setup involved, but it is fairly easy to get up and running, even for newcomers to HTML and Web Design. A few things we’ll need to cover include downloading your very own copy of the framework, becoming familiar with the structure and layout of the file system, including the Bootstrap CSS into our website, and finally adding the needed Javascript to our website. Sounds like fun, yes?! It is, so let’s get cooking 🙂


Downloading Your Own Copy of Twitter Bootstrap

As you may or may not know, the official website for Twitter Bootstrap can be found at http://getbootstrap.com. Here you will find anything and everything about the framework including its history and very helpful, detailed documentation. It is also possible to set up customization. First off, let’s go ahead and click on the Download button right on the homepage to get our own copy.

Some points to keep in mind:

  • Your Download can be customized: One thing worth noting is that you can customize which components of the framework you can download, as well as customize some of the styles associated with your particular download. Downloading this way give the benefit of having a more unique and lightweight style to your site, however a drawback is that if you ever need to download an updated version of the framework in the future, you will have to know exactly all options that you chose the first time around. This is actually trickier than you might first think.
  • You can opt to Download the entire package: On the other hand, you may opt to download the entire package and include all components and dependencies. Keeping the default styling options will also help you to more easily keep track of your project as you grow and maintain it in the future. In addition, let’s face it – 99% of the folks on the internet have no idea what a Twitter Bootstrap or Web Design Theme is all about, they just know if something looks good or not. Sure, your fellow developer friends may make fun of you for using all the defaults, but for your larger audience, I don’t think it really matters.
  • Download the whole minified package: Since this tutorial is an examination of the framework and we want to learn about all features available to us, go ahead and grab the option that simply says Download Bootstrap. This version contains everything you need to get started in a lightweight and minified form. As you get more experienced if you find you need more customization and a lighter footprint, then you can get into more customized solutions.

For our purposes, we’ll go with the option you see here.
download bootstrap


Digging in to the Bootstrap File Structure

Once you click that download button, you’ll likely find that a zipped file something like bootstrap-3.1.1-dist.zip will be copied to your computer. We’re going to need a local install of a webserver to work with Twitter Bootstrap on our local machine. If you are familiar with MAMP or WAMP, you’ll know how to get this going if you do not have it already. We covered installing WAMP on Windows in a post about the great Laravel PHP Framework, so if you need some tips you can check that out as well. You are going to need some type of file compression program to unzip the file, an excellent and free program can be found at http://www.7-zip.org/ if you need one.

Create your Sandbox Directory

Once you have downloaded and unzipped your copy of the framework, we’ll need a Sandbox so to speak, to start setting up our initial tests and examples. Likely you’ll have something like C:wampwwwbootstrap-3.1.1-distbootstrap-3.1.1-dist on your computer. What I would recommend is to name a folder in the root www directory of bootstrap. You can then copy the three folders we need, those being css, fonts, and js, into your bootstrap folder. bootstrap is now the parent folder, and css, fonts, and js are the child folders of your Bootstrap install. Ok, that was a little wordy and confusing. The end goal is that you want to have your three bootstrap folders nested in C:wampwwwbootstrap so we can get started. You can do it, I know you can!

What are the Important Files in Twitter Bootstrap?

Now that we have our Sandbox set up, let’s closely examine each file that gives us the power the framework offers.

css Folder

  • bootstrap-theme.css This file is new in the 3.0 and up versions of Twitter Bootstrap. The reason is that the base install of the latest versions of the framework use a very flat and plain design. It’s a great idea actually, since we aim to have the framework give us a starting ground, or platform so to speak, to build our masterpieces from. If you find this look just a bit too plain, including the optional theme provided, you can have some of the more traditional look of the 2.0 levels of Bootstrap which is slightly more flashy.
  • bootstrap-theme.min.css This file is simply the minified version of the provided theme. Again, it is for use when you find the base install of the framework a bit too plain for your liking.
  • bootstrap.css This file is the formatted source css file. It is human readable and is great for really digging in to the css source of bootstrap to understand how the styling works under the hood.
  • bootstrap.min.css This file is the minified version. When a file is minified, all white space characters, newlines, and formatting is removed. Minification makes our files smaller and load quicker. This is a great benefit. The computer and browser do not care about formatting, so it works just the same. We’ll use the minifed version in our examples.

fonts folder

The fonts folder contains four files of glyphicons. They are all the same except for the format. These fonts support the glyphicon fonts and snazzy icons that we all know and love! Somehow simple icons of actions and visual representations of common web features are strangely addictive 🙂

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

js folder

The js folder contains, you guessed it, Javascript files! Javascript is incredibly powerful when used correctly, and the authors of Bootstrap have certainly used Chuck Norris worthy Javascript chops to create some really awesome effects using Javascript. The js folder has 2 files.

  • bootstrap.js For the brave soul what wants to take a peek at the human readable javascript source and try to decipher the meaning, this file is for you.
  • bootstrap.min.js We’ll be making use of this file in our projects as it is lightweight and has all the benefits of minification.

Conclusion

With this inspection of the files and configuration for Twitter Bootstrap, you are now ready to actually create some Bootstrapified HTML Web Pages! Some of this is likely review for many Web Designers, however we are covering the whole enchilada in this Twitter Bootstrap Series. Coming up we will Create a New HTML Bootstrap Page!