89

There are currently five different ways to quickly bootstrap (no pun intended!) a Stack Snippet with specific frameworks:

  1. jQuery
  2. d3
  3. KnockoutJS
  4. Angular
  5. Custom / "external library"

At least one important one is missing: Twitter Bootstrap. It has about 3 times as many questions for its base tag as d3 and KnockoutJS have.

Now option 5 "External Library" is a very useful catch-all that can be used to include a framework other than "the base 4 options" in a Snippet, but with Bootstrap it's actually quite a fuss to figure out the right combination of libraries. I often find myself going back in a separate browser tab to one of my old questions to copy-paste e.g. this set of libraries:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

I'm not sure how, but it'd be nice if Stack Snippets ordered some kind of assistance in setting up snippets to reproduce Twitter-Bootstrap scenarios. Is something like that feasible?

8
  • 2
    I see and subsequently remove a lot of non-functioning bootstrap snippets. People post them without including the CDNs a lot of the time, and when they're trying to demonstrate a layout solution, it breaks their answers. I either instruct them to provide a Bootply example or properly include the <link> and <script> tags.
    – Tim Lewis
    Commented May 15, 2015 at 17:49
  • 21
    I asked for this on MSE way back when but didn't get much traction.
    – DavidG
    Commented May 15, 2015 at 18:32
  • 1
    Instead of adding bootstrap or some other frameworks , stick to a more open approach like adding external css , js files. bootstrap might soon fade away. Note: I've said might and this is another opinion on internet. Commented May 16, 2015 at 16:01
  • 2
    @AbhinavGauniyal Using that argument, then why are jQuery, D3, Knockout and Angular available as options?
    – DavidG
    Commented May 16, 2015 at 23:18
  • 3
    @AbhinavGauniyal The open-ended approach is great, but there's nothing wrong with making commonly-used options more easily accessible to users, and eliminating the boring drudgework of finding the right CSS/JS files to include. Commented May 17, 2015 at 2:47
  • How about users setting global preference what library they need, (i think the same should be with browsers instead of loading jQuery for each page that need it there should be <depend>jquery,bootstrap</depend> with a fall-back and the browser should fetch it locally)
    – YesItsMe
    Commented May 17, 2015 at 18:16
  • 9
    How on Earth did this question get an answer dated last year?!
    – DavidG
    Commented May 17, 2015 at 22:51
  • 2
    @DavidG's question has been presented here.
    – Jason C
    Commented May 17, 2015 at 23:36

2 Answers 2

8

There's already an external library link next to the AngularJS dropdown. It opens a dialog which allows you to put a URL to a javascript or CSS file in. bootstrapcdn.com hosts links to the latest main bootstrap and javascript file. No other files are needed, presumably beside it resides locally on their servers. So really, all one needs to do is either use the dialog, or put these two lines at the top of the HTML box:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

This concern has already been covered in Feedback requested: Runnable code snippets in questions and answers. To quote KyleMit:

External files are not a problem! Just include them in your HTML the way you would for any other site.

Bootstrap

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

So this would not be very beneficial to implement.

7

I agree that the back and forth isn't ideal. It can make getting a simple code sample up and running a little cumbersome. If you you answer a lot of questions, you probably know where and how to add the css and script files, but there's still an extra step to get up and running.

My un-official solution I've branded as Stack Snippet Starter Packs.

When relevant to a tag, I've been setting up a bare bones application with the applicable libraries and adding it to the particular tag.

When asking or answering a question, it should provide a simple way for someone to get a simple example up and running in their question. You just have to hover on the tag and click info. Then copy and paste the libraries into your question. It's a little more hassle than putting it right on the Stack Snippet interface, but it's the appropriate place for that information to live because the community can keep those links moderated and up to date and provide setup code for an unlimited number of new tags / libraries.

Plus that's exactly the sort of information that should live in a wiki. i.e. how to get started with real code.

Unfortunately, stack snippets markup doesn't react well to being put in code blocks, so tags should just include libraries and perhaps some base Proof Of Concept code.

Here are some examples:

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .