Tutorial 2: Basic Bootstrap Template

In Bootstrap by Sarmad Javaid2 Comments

In this second Bootstrap tutorial, we’ll be:

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

If you don’t know what Bootstrap is then select tutorial 1 from the following list of bootstrap tutorials.

Linking files in Bootstrap

In Bootstrap tutorial 1, we created index.html and linked a Bootstrap.min.css file to it. Now, for Bootstrap to work properly we need some more files to link with index.html, there are two ways to link required files:

  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.

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 grab required code files for bootstrap to work properly. This way you get the requirements fulfilled without downloading required files.

Apart from adding CDN links, I’ve also added style.css(line 13) and script.js(line 32) files in css and js folders respectively for adding custom code.

Code Explanation

Explaining code line by line below:

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 above code your project hierarchy should look like Fig 2.1

Bootstrap CDN
  1. Browsers can download a certain number of assets per web site concurrently. Since the CDN is on another site it’s not included in that limit. So browser do not download 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 on 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.

Method2: Installing Bootstrap manually

If you decide to install bootstrap manually. First download bootstrap files from http://www.getbootstrap.com. Decompress the downloaded file and you will have three folders namely CSS, JS, FONTS in *dist folder. Its the same thing that we did in previous tutorial.

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: Method1 and Method2 are used in different ways but solution of both are exactly the same.

Code Explanation

Explaining code line by line below:

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
  • Goto console and if there are no errors then you won the trophy. Fig 2.3

Conclusion

In this tutorial, we created basic folder structure and integrated bootstrap both manually and using CDN. We linked some other files necessary for Bootstrap. Now we are ready to start working on bootstrap.

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

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


Bootstrap Tutorial 2: Quiz Questions

Please enter your email to start FREE quiz.


Share this Post