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.
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.
Bootstrap 3 CDN setup
Below you see the basic Bootstrap template with the use of CDN support for Bootstrap and jQuery:
<title>Bootstrap 3 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!-- Include all compiled plugins (below), or include individual files as needed -->
Save this in a new Bootstrap project folder and you’re ready to start working on your new Bootstrap webdesign.