Learn how to use Bootstrap from a single file-no CSS or Javascript directory needed because they are loaded from a public website (called a CDN)

This quick tutorial shows how to use Bootstrap from a CDN, or content delivery network. You know how normally you create a CSS directory for stylesheets and a JSS (or whatever you call it) for Javascript assets? You can pull these files off someone else’s server instead (the CD).

I like this for quick prototyping tests on code that uses resources such as Jquery and Bootstrap because I can do a test in one file.

In production, it may be better to host Bootstrap and Jquery yourself. You have more control over them and the performance may be better, but that all depends on the CDN.

How to use Bootstrap with a CDN

It’s easy to use Bootstrap with a CDN.

1. Instead of using a local file reference, just include an href to the stylesheet somewhere between the <head> and </head> tags:

2. Link to the CDNs for Jquery and Bootstrap between the <body> and </body> tags:

Here’s everything you need to put up a Bootstrap site, all in a single file. Simply copy and paste into a file called index.html or whatever you wish to name it. It will work fine on your own machine or on a server, unchanged. And you don’t have to remember to create Bootstrap or JQuery directories.

The site will look like this:

Screen shot: Bootstrap Starter Template All in One File Using CDN

How I found the Bootstrap CDN

If you want to know whether a library you’re interested in is available on a CDN somewhere, just search for bootstrap cdn or whtaever. That’s how I found bootstrapcdn.com

Advantages to using a CDN

        • Great for trying experiments quickly because you can code from a single directory without creating separate directories for CSS or Javascript assets
        • Someone else maintains these files for you and often can automatically upgrade to the latest version

Disadvantages to using a CDN

        • If the CDN goes out of business, you have to re-host on your own website
        • If the CDN performance is bad, it reflects badly on your website
        • If you use something like jquery_latest (shown below) to obtain the most recent version, it’s possible that new, incompatible code in the library may break your existing code.
        • It doesn’t work offline, so you can’t develop without a net connection.
        • You can’t edit the CSS or Javascript on the CDN (big security risk, and of course it would change every one else’s copy)
        • It’s easy to forget to upgrade a library if versions change. The JQuery CDN avoids this neatly by using  jquery-latest.js
Report Error

Report ErrorClose

Comments are closed.