Installing Bootstrap

Bootstrap is simply a set of CSS, JavaScript, and font files. To install Bootstrap, you just have to download those files, place them into your project folder, and link to them from your HTML file.

Download Bootstrap

  1. Create a new folder for your project, perhaps called “bootstrap”
  2. Download the compiled and minified Bootstrap code
  3. Unzip the file; a folder that contains three sub-folders (css, fonts, js) will appear
  4. Move these three sub-folders into your “bootstrap” project folder

Download JQuery

Many of Bootstrap’s features depend on another popular framework called JQuery. You can add the JQuery library to Bootstrap as follows.

  1. On the JQuery download page, click the link to download the latest compressed, production version
  2. Save the file into your project’s “js” sub-folder

Link to Files

You are now ready to add links to these Bootstrap files to your own HTML code.

  1. Create a new HTML file named “index.html” in your project folder
  2. Copy and paste the example code from the Bootstrap site’s basic template
  3. Update the link to the JQuery file in your JS folder (this is toward the end of your HTML code)
  4. Save the file and preview it in your web browser

This page contains just a heading. If the heading shows up in a sans-serif font (Helvetica Neue Medium), then you have correctly set up the Bootstrap default theme. If the heading appears in a serif font (Times Bold) instead, then it is not working.

Once you have this working, try to adapt the Bootstrap starter template.