learning tech · Programming

Downloading Bootstrap Explained

Bootstrap, how do I really get started?

Bootstrap is a very popular framework for developing mobile-first web sites with HTML, CSS, and JavaScript.

If you’ve landed here there is a chance you aren’t exactly sure how to begin.

This post serves to further explain your options and how to set them up.

If you go to the GetBootstrap website there is a “Download Bootstrap” button. Clicking on it leads you to a page where you will see a few download options.

In the download section, you have three download options and then there is one additional option, the “Bootstrap CDN (content delivery network)”.

  • Download Bootstrap (This blog post will cover this option)
  • Download source
  • Download Sass
  • Bootstrap CDN (This blog post will cover this option)

Each of those sections gives you a two-sentence description. I’m going to take each one and explain exactly what it is, what to do with it, and why you want it.

The “Download Bootstrap” option.

This is their description:

“Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.”

‘Compiled’ meaning the source code has been processed into executable code. ‘Minified’ means that all the unnecessary characters from the source code have been removed but the functionality has not been changed. Unnecessary characters can mean white space, new lines, comments, etc.

‘No docs’ mean that there will be no documentation. ‘No original source files’ mean that it will not contain a file with program instructions.

So who would want to use the Bootstrap Download option?

I would suggest this option for designers as there is minimal set up required. After a few steps, you can jump right in and start utilizing the framework in your HTML.

There are also loads of tutorials online to help with exactly how to use Bootstrap. You will need to be mindful if you are going to use JavaScript plugins, they will require jQuery. I’ll get back to the jQuery part in a minute.

How do you download and unzip bootstrap?

  1. Go to this link and click on Download Bootstrap. Your file will download in a zipped format.
  2. Unzip the downloaded file. Now you have a folder called bootstrap-(version number)-dist. (e.g. bootstrap-3.1.7-dist)

When you open the new unzipped folder called bootstrap-(version number)-dist, it will contain three more folders named css, js, and fonts. Inside those folders will be files. The following image is a screen grab from the getbootstrap site showing the folders with their files.

precomplied_bootstrap

So now what?

Hopefully you are an organized designer. You don’t have files strewn about all willie-nillie.

58314508

I’ll use my personal preference as an example.

I have a folder where I keep all of my projects. Lets say I call it my_projects.

Inside the my_projects folder, I will have another folder with the name of the project I’m working on. For this example, I’ll call it my_bootstrap_site.

This folder is where you will place the three folders from our unzipped bootstrap file.

There are a lot of extra files that you probably won’t need, but go ahead and copy everything (css, fonts, js) to your project folder.

I previously mentioned you will not need all these files when the time comes to make your site live. The main files you will need will be the bootstrap.min.css, bootstrap.min.js, bootstrap-theme.min.css (only if you need the extra functionality it provides, it works fine without this), and all the fonts.

You will not need any of the .map files as they are only used for debugging minified files. If at some point you need that feature you can add those files then.

At the root of your project folder, you place your index.html file. To get an idea, see the image below.

boot_strap_blog_post_files

There is one more element that you will need and that is jQuery, all of bootstrap’s JavaScript plugins require it. jQuery is a fast, small, and feature rich JavaScript library. Bootstrap uses it to make complex tasks easier.

 

The Bootstrap site has an alert notice and directs you the starter template:

“Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template

If you look at the starter template there is a bit of code at the bottom that looks exactly like this (the grey highlighted section):

jquery_bootstrap

I’ve included it as an image and not code that can be copied for a reason. As of the date that this blog post is published, that will be what you would use but it could change. That means you’ll want to go to their site and look for the jQuery requirement.

I’ve skipped over actually downloading jQuery as I’m trying to keep this simple. I’m using the CDN for it above, there are benefits to doing it this way. One being when multiple people are using the CDN link as I’ve shown above it will end up cached in the browser.

If you wanted to download jQuery you can follow this link. After I’ve downloaded it I’d place it in the js folder with your other .js files.

Once that bit of code is added to your HTML file, you’re ready to use Bootstrap.

finally

What if you don’t want to go through all that?

The Bootstrap CDN Option

The second option would be to use the Bootstrap CDN. CDN stands for content delivery network. You will not have to download anything. You will not have to host these files on your site.

Instead, you will get everything you need via link/script tags placed in your HTML file:

bootstrap_cdn

The GetBootstrap site provides links for the latest versions of the CDN.  You will have to copy them and add them to your HTML. I’ve given an example below by adding the CDN to the Bootstrap Basic Template:

bootstrap_cdn_example

If you look at line number 12, you can see that is where the CDN link for the css is pasted. Line number 24 is where the link for the js or JavaScript link is placed. Line number 21 is where the necessary jQuery link is put. You can use this as a guide for where you would want to put the CDN links in your code wrapped with the appropriate tags.

I hope this blog post clears up a little bit of confusion when it comes to actually getting the parts in place to start using Bootstrap.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s