Tutorial 2: Getting started with bootstrap 3 (Part 2)

In Bootstrap by mubeen2 Comments

This is second tutorial of Bootstrap 3, in this bootstrap tutorial we will learn:

  1. How to install Bootstrap using CDN & link required files
  2. How to install Bootstrap manually & link required files
  3. Advantages & Disadvantages of Bootstrap CDN
  4. Bootstrap Helping Material

Don’t know what bootstrap is? Goto tutorial 1

Linking files in Bootstrap

In Bootstrap tutorial 1, we linked Bootsrap css file to the index.html but for Bootstrap to work properly, we need to link few more files to index.html. This can be done in two ways:

  1. Using CDN
    • Link to required files on CDN and use them in your project without downloading them.
  2. Manually 
    • Download all required files to project folder and change them the way you like. (Already done in tutorial 1)

Method 1: Installing Bootstrap using CDN

To install bootstrap using CDN(Content Delivery Network), you need to add following code in the index.html file. It simply goes to specific links and grabs the required code files for bootstrap to work properly. Doing so, you get the requirements fulfilled without downloading the required files.

Apart from adding CDN links, I have also added style.css on line#13 and script.js on line#32 files in css and js folders respectively for adding custom code.

Line-by-Line Code Explanation

7: including bootstrap’s core css file
10: including boostrap’s optional theme
13: including a stylesheet for customising bootstrap
20: including jquery so that boostrap javascript can function
23: including boostrap core js file
26: including html5shiv to support html5 in older browsers
29: including respond.js to support CSS3 in older browsers
32: including a script for customising bootstrap

Folder Hierarchy

After adding the above code, your project hierarchy should look like as shown in Fig 2.1

Bootstrap CDN

Advantages of CDN

  1. Browsers can download a limited number of assets per website at a time. Since the CDN is on another site, it’s not included in that limit. So browser does not download the same file again.
  2. There’s a good chance that your ISP has already cached files from popular CDNs.
  3. Good for free web hosting sites like Weebly that don’t let you create script or assets.
  4. If your site gets low traffic and uses an inexpensive hosting service, a CDN is all win.

 Disadvantages of CDN

  1. If the CDN goes out of business, you have to re-host your own website.
  2. If the CDN performance is bad, it reflects badly on your website.
  3. It doesn’t work offline, so you can’t develop without a net connection.
  4. If your site serves complicated web pages with many assets on one page, the performance may outweigh the slight risk of the CDN going down.

Method 2: Installing Bootstrap manually

In tutorial 1, we also created an index.html file in the same ‘dist‘ folder where we have CSS, JS and FONTS folders. Open index.html and paste following code in it:

Note: Method 1 and Method 2 are used in different ways but solution of both are exactly the same.

Line-by-Line Code Explanation

7: including bootstrap’s core css file
10: including boostrap’s optional theme
13: including a stylesheet for customising bootstrap (add yourself)
20: including jquery so that boostrap javascript can function properly. Download jquery
23: including boostrap core js file from js folder
26: including html5shiv to support html5 in older browsers. Download html5shiv.js
29: including respond.js to support CSS3 in older browsers. Download respond.js
32: including a script for customising bootstrap (add yourself)

Folder hierarchy (Fig 2.2)

Bootstrap installation

How to check if files are linked correctly?

  • Open index.html in browser (lets say chrome).
  • Right click in white area in your browser and click on inspect element or press (Ctrl+I)
  • Go to console and if there are no errors, you have won the trophy. Fig 2.3

Conclusion

  • Installing bootstrap using CDN is way easier but you need to have good internet connectivity, CDN won’t work without the internet.
  • It is very important to link jquery, html5shiv and respond.js files in correct order as linked above.

Next tutorial is about basics of bootstrap in which we will learn about grid system, containers, rows, and breakpoints.


Bootstrap Tutorial 2: Quiz Questions

Please enter your email to start FREE quiz.


Share this Post