Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Bootstrap CDN?

I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.

How would I go about resolving this- my code is attached bolow. ?

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">  <html> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Matt's Homepage</a> <ul class="nav">   <li class="active"><a href="#">Home</a></li>   <li><a href="http://www.mattydb.com">Website</a></li>   <li><a href="http://www.twitter.com/akkatracker">Twitter</a></li> </ul> </div> </div> <div class="btn"><a href="http://www.mattydb.com">Click Here to Visit my Blog</a>   </div>               </html> 
like image 277
akkatracker Avatar asked Jun 29 '13 06:06

akkatracker


People also ask

Why do we use Bootstrap CDN?

It helps us to improve the rendering time and website performance. Bootstrap CDN is a free content delivery network that helps us to quickly load Bootstrap CSS, Javascript, and jQuery libraries on our projects to make projects responsive, mobile friendly, and attractive.

Is Bootstrap CDN good?

When you have a Bootstrap themed local website, the chances are that it can use some speed boost. One of the best ways to accomplish that is by using a CDN (Content Delivery Network) to deliver static content to the users faster. CDNs are effective ways to boost page speed and enhance user engagement at the same time.

What is the full form of CDN in Bootstrap?

If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

Does Bootstrap have a CDN?

Bootstrap CDNThe folks over at jsDelivr graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.


1 Answers

As others have mentioned, using a CDN is usually as easy as adding:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"       rel="stylesheet"> 

into your HTML. But this doesn't work when you are loading your html from a local file.

The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.

This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).

Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"       rel="stylesheet"> 

I hope this will be useful to someone...

like image 95
Googol Avatar answered Sep 27 '22 22:09

Googol