External resources in JSFiddle (Adding Twitter Bootstrap CDN)

Question

I am trying to replicate my issue with JSFiddle but when needed frameworks not supported natively, I believe I will need to import them from external resources. However, clicking + won't open up anything and I am not sure what to do with the URI field.

The simple question is, I particularly need to embed Bootstrap.

How do I embed Bootstrap in JSFiddle?

Iota

You put the url of the resource in the textbox then you click the + – Judkins

Thanks, but the question is how do I make Bootstrap externally available? Do I need to host it somewhere? Unlike jQuery, I don't know if Bootstrap CDN is supported... – Iota

This is a meta-question, if I ever saw one. Just saying... – Killjoy

No, @nickhar, I didn't mean that it belonged on meta, I meant that it seemed to be a question about a question, given that it opens "I am trying to replicate ..." but now that I'm re-reading it it's not :) – Killjoy

Visit webgetway.com/bootstrap, you will find CDN there: under installation – Rubio

Answer 1

BootstrapCDN is supported by JSFiddle, you just need to paste in the relevant URLs.

In the external resource field/box enter each of these URLs* and hit +:

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

The result of which is: http://jsfiddle.net/v9ec3/1/

Which then allows you to post your HTML/CSS/JS as required. Edit away and click update when finished to give you a URL that you can paste anywhere (including here!). Note you don't need to reference it via link.

****Note:** The above bootstrap version URLs (2.3.2) are pasted from http://www.bootstrapcdn.com at the time of the question*

Barbera

One other simple question if you don't mind, how do I get the fiddle link without my account name (making it public?) I tried to add title and description to make it public but makes no difference... – Iota

Sure, for anonymity and if you have a JSFiddle account, just logout, create a new fiddle and you can modify as many times as you wish, update and then post the URL anywhere. Does this help? – Barbera

Answer 2

Use Https instead of http as it jsfiddle allows only https. Please check it down here

https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

Heterolecithal

Answer 3

For a more general solution to this (not only Bootstrap but many other JavaScript libraries), I found cdnjs very helpful: Go to cdnjs, search for your library, copy the URl and paste it in the "External Resources" field of your fiddle.

Dorty

Answer 4

I do something like this: @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

Carbonari

Answer 5

you can look this example my jsFiddle jsFiddle it is easy you want add cdn like jquery, bootstrap bulma etc. you want add bootstrap v5 cdn, you just look on sidebar with name "Resources" it have label 'URL','cdnjs' . click it and + .

1. then search bootstrap you can select version

2. or you can paste manual cdn below if you want another version or another cdn. cdn below for bootstrap v5.2.

   https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

   https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Pearlene