44

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?

nickhar
  • 19,981
  • 12
  • 60
  • 73
Seong Lee
  • 10,314
  • 25
  • 68
  • 106
  • 2
    You put the url of the resource in the textbox then you click the `+` – Musa Jul 04 '13 at 21:41
  • 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... – Seong Lee Jul 04 '13 at 21:53
  • This is a meta-question, if I ever saw one. Just saying... – icedwater Jul 05 '13 at 01:15
  • 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 :) – icedwater Jul 05 '13 at 02:40
  • Visit http://www.webgetway.com/bootstrap, you will find CDN there: under installation – Uday Hiwarale Nov 15 '13 at 17:23

5 Answers5

59

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*

aug
  • 11,138
  • 9
  • 72
  • 93
nickhar
  • 19,981
  • 12
  • 60
  • 73
  • 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... – Seong Lee Jul 05 '13 at 01:56
  • 1
    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? – nickhar Jul 05 '13 at 01:59
4

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

Bharath Koppula
  • 51
  • 2
2

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.

chiborg
  • 26,978
  • 14
  • 97
  • 115
0

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

sanderson
  • 1
  • 2
0

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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"

    https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js

Anjasmara Dwi.S
  • 303
  • 1
  • 8