Bootstrap 3 Template with a CDN

Like to use Bootstrap 3 without any hassle? Without having to worry if the links to the Bootstrap files are still working after uploading your site to a server?

This time we’ll create a basic Bootstrap 3 template with a CDN that hosts the required Bootstrap and jQuery files.

Content Delivery Networks (CDN’s)

The previous two tutorials required you to first go to the download location, download the zip file, extract the files and paste them in your Bootstrap project folder.

This time we can forget about those steps.

Instead we’ll use files hosted on a Content Delivery Network (CDN). If you are unfamiliar with CDN’s (and want to know some more about them) you can find an explanation about Content Delivery Networks on Wikipedia.

On the Bootstrap website the CDN support provided by MaxCDN can be found. Personally I prefer using the Cloudflare CDN support because they host other libraries that I often use in my projects.

How to use the Cloudflare CDN

Click on this link for Cloudflare to open their site in a new window/tab.

In the column on the left you see links (red) for the libraries hosted by Cloudflare. If you click on one of these links a new window will open with all the versions and links for that library.

jQuery links on Cloudflare

A quicker method to get the link to the latest (and minified) version is to insert the name of the library in the search bar. It will then display the link with a copy button to the right.

Use the link you just copied for the ‘src’ property in the link for a stylesheet (or a script link if it’s a JavaScript file). Make sure that you also add “http:” before the link you copied from Cloudflare to get a working address.

Bootstrap 3 CDN setup

Below you see the basic Bootstrap template with the use of CDN support for Bootstrap and jQuery:

Save this in a new Bootstrap project folder and you’re ready to start working on your new Bootstrap webdesign.

 

6 comments

KASIIMWE DENISE - November 11, 2016 Reply

and thanks for the demo.very helpful

KASIIMWE DENISE - November 11, 2016 Reply

how can i change the color of the tabs to brown

Theo - November 13, 2016 Reply

Hi Denise,

guess your question is related to one of my other tutorials (about Nav Tabs). If you’re not familiar with how to make small changes to the (Tabs) colors in Bootstrap try my tutorial about the use of Bootstrap Magic

Regards, Theo

Pascal Guillon - May 12, 2016 Reply

Great material! Directly usable, it’s wonderful. Many thanks!

Theo - May 12, 2016 Reply

Thanks Pascal!

Weskamouse - March 14, 2015 Reply

It’s crazy how often I copy paste this page for quick dev playgrounds.

Add your comment