Bootstrap: A Crash Course

Bootstrap: A Crash Course Part 1

March 31, 2015


A Crash Course in Bootstrap

The purpose for these series of posts is to get you up-and-running with Bootstrap as quickly as possible. While it will not be an in-depth guide, it will provide you with the basic structure needed to build Bootstrap sites.

Getting the necessary files linked up to your .html page.

To make your site responsive with Bootstrap, you will utilize their CSS style sheet. Like most style sheets, you can choose to include the .css file within your project folder and import it into your index.html file, or you can import it from MaxCDN.

NOTE: There are pro’s and con’s to each method.

DOWNLOAD: If you choose to download the .css Bootstrap file, you will not have to worry about the style sheet being readily available for your site to use, but you will have to continue to download newer versions as they come out to keep your site up-to-date.

MAXCDN: On the other hand, choosing to import the MaxCDN link on your .html page will provide you with the newest version of Bootstrap automatically, but you do have to be aware that, despite the one-in-a-million chance their site goes down, you run the possibility of losing access to the Bootstrap Framework for your site.

With either method that you choose, you will need to go to this Bootstrap page to get the necessary resource(s).

OPTION 1: Click the first option button under Bootstrap Section in the Download section. Once downloaded, you will have a couple of files in the .zip folder. The only ones you need to be concerned with at the moment are the the bootstrap.css and boostrap.min.css files. The bootstrap.min.css file is simply a compressed version of the bootstrap.css file, just without any spaces or formatting (can improve site performance). Now all you have to do is link the file of your choice to your .html page.

OPTION 2: Under the Bootstrap CDN section, copy and paste the first link provided in the text area box into your .html page. If you decide later on to use some of the Bootstrap Javascript, then you can copy the third link, and paste it at the bottom of your .html page. You will, however, need to place a JQuery script link above the Bootstrap JavaScript script tag.

TIP: For inspiration and motivation, click on the Explore the Expo button on the Bootstrap home page to see what other web designers and developers have done with the framework. It can be quite beneficial to your growing web design knowledge to find certain features that you like and try to mimic or figure out how they did it.

If you are using Google Chrome, you can right click on the page and select Inspect Element to see the coding behind the site.

Now that you have Bootstrap setup, we can dive-in on how Bootstrap makes your website Responsive on the next post: “Bootstrap: A Crash Course Part 2“.