Bootstrap, how do I really get started?
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’ 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.
How do you download and unzip bootstrap?
- Go to this link and click on Download Bootstrap. Your file will download in a zipped format.
- 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.
So now what?
Hopefully you are an organized designer. You don’t have files strewn about all willie-nillie.
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.
The Bootstrap site has an alert notice and directs you 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):
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.
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:
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:
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.