Bootstrap 3 Website Download Options

When you visit the official Bootstrap 3 website you see a big download button on the home page. Unfortunately this creates the impression that this is the best method to install Bootstrap.

But in my opinion there are better alternatives when you start with Bootstrap. This tutorial explains the the advantages and disadvantages of the Bootstrap 3 website download options.

Download options

In this tutorial (and the next two tutorials) I will show you 3 – 4 options that you can choose from to download and install Bootstrap 3.

  1. The official Bootstrap site actually has 2 options.
  2. I will also tell you about another site where you can include all the other files you need to get a working Bootstrap 3 setup.
  3. And finally I will show you how you can Bootstrap 3 working without any downloads.

Along the way I will draw your attention to things that could easily trip you up and how to avoid this.

Download(s) from official Bootstrap site

When you visit the official Bootstrap website you’ll see 2 download buttons on the home page: “Download Bootstrap” and “Download source”. Unless you need specific files (e.. LESS files) my advice is to click on “Download Bootstrap”.

“Download Bootstrap”

The “Download Bootstrap” zip-file includes all the minimally required Bootstrap folders and files. In most cases this is a better starting point when you want to start a new Bootstrap project.

By the way: when you visit the “Getting Started” page “Download precompiled Bootstrap”. This results in the same download package.

  • Download and extract

    Click on the “Download Bootstrap” button on the home page.

    Go to the download location on your computer and look for the file “bootstrap-3.0.0-dist.zip”.

    Extract the content from this zip-file into the location where you want your project files.

  • Rename folder

    After the extraction you will see a folder named “dist”. Rename this folder and give it a name suitable for your project.

  • Basic template

    Return to the Getting started page and scroll down until you see the heading “Basic template”.

    Copy the HTML code shown below the “Basic template” heading and paste it in a new file with your HTML editor.

    Save this new file with the name “index.html” in your project folder.

Take care
  • The required jQuery library is not included in this download and the link to the jQuery library at the bottom of this basic template doesn’t actually work. You need to download the latest jquery library file from the site jquery.com and insert it into the js subfolder of your project.
  • The head section of the basic template contains unworking links to the files “html5shiv.js” and “respond.min.js”. You also need to change these links into actually working links if you want to really get these libaries to work.

“Download source”

The download option “Download source” will include a lot of folders and files such as all of the documentation and examples from the Bootstrap website. A lot of these files you will probably never use.

  • Download and extract

    Click on the “Download source” button on the home page.
    Go to the download location on your computer and look for the file “bootstrap-3.0.0.zip”.
    Extract the content from this zip-file into the location where you want your project files.

  • Rename folder

    After the extraction you will see a folder named “bootstrap-3.0.0″. Rename this folder and give it a name suitable for your project.

  • Customize index.html

    Locate the subfolder “examples”. Look for the folder “starter-template”.
    Open the file “index.html” (that resides in the starter-template sub subfolder) in your HTML editor. Leave out the components that you do not want in your own basic template.
    Save the “index.html” file as a starting point for your Bootstrap project(s).

Advantages/Disadvantages
  • The advantage of this approach is that you have a working installation straightaway (you do not need to download any extra libraries).
  • The disadvantage is that you get a complex folder and files structure, making this a difficult setup to copy and/or upload to a server later on.

Add your comment