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

In Bootstrap by mubeen2 Comments

Welcome back to up and running with Bootstrap 3 learning series with Hfarazm Software.

Lets get started with our second tutorial of Bootstrap 3, in which we will learn:

  1. Creating a basic bootstrap template using CDN
  2. Advantages and disadvantages of Bootstrap CDN
  3. Creating a basic Bootstrap template
  4. Bootstrap Helping Material

Note: *If you don’t know what Bootstrap is, take a step back and go through first tutorial from the following list of Bootstrap tutorials*

Linking files in Bootstrap

In previous Bootstrap tutorial, we linked Bootstrap.min.css file to the index.html file. But for Bootstrap to work properly, we need to link a few more files to index.html. This can be done in two ways: either by

  1. Installing Bootstrap using CDN
    • Link to required files on CDN and use them in your project without downloading them.
  2. Installing Bootstrap Manually 
    • Download all required files to project folder and change them the way you like.

Note: *Installing Bootstrap Manually has already been discussed in the first tutorial of the series*

Method 1: Installing Bootstrap using CDN

If you choose to use 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(line#13) and script.js(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
  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.
  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

In this tutorial, we learnt about Bootstrap, different methods to install Bootstrap and their advantages and disadvantages. To quickly sum it up, we created a basic folder structure and integrated bootstrap both manually and using CDN. We linked some other files necessary for Bootstrap.

We are all ready to start working with Bootstrap.

In the next tutorial, we will take a look at basic grid system and navigation bar and will create a cool landing page


Bootstrap Tutorial 2: Quiz Questions

Please enter your email to start FREE quiz.


Share this Post