Twitter Bootstrap

Twitter's bootstrap is simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

This Dancer template is pre-configured to use bootstrap, and contains a script to easily upgrade to the latest bootstrap version.


Fort-Awesome's Font-Awesome is an iconic font designed for use with Twitter Bootstrap (overriding bootstrap's default "glyphicons" set).

This Dancer template is pre-configured to use Font-Awesome, and contains a script to easily upgrade to the latest Font-Awesome version.


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Dancer always used jQuery by default, so there's nothing really new here, except upgrading to 1.7.2 (and not using CDN).


Template::Toolkit is a fast, flexible and highly extensible template processing system.

Dancer always worked with Template::Toolkit, so there's nothing really new here, except:

  • Dancer's default template was Template::Simple, and in this template it's changed to the more powerful Template::Toolkit.
  • Dancer's default tags were <% and %>,
    and in this template there are changed to [% and %].

Working Examples

Don't re-invent the wheel! Here are ready-to-use examples, just copy, paste & adapt the code & templates to your needs:

Start here

  1. Download the latest template files
  2. Extract the files
  3. run update_bootstrap and update_fontawesome to download the latest versions
  4. run update_app_name to set your application name (instead of the hardcoded dancer_bootstrap_fontawesome_template).
  5. run ./bin/ (in the usual Dancer way)
$ wget -O
$ unzip
$ cd agordon-dancer_bootstrap_fontawesome_template-*
$ ./bin/update_bootstrap
$ ./bin/update_fontawesome
$ ./bin/update_app_name MyNewApp  # or any name you like
$ ./bin/
## and visit http://localhost:3000 to dance

How to

  • Learn about Dancer:
  • Learn about Bootstrap's CSS:
  • Learn about Font-Awesome:
  • Override Bootstrap's CSS settings: change <dancer_directory>/public/css/style.css - it will be loaded after Bootstrap's CSS.
  • Tweak the CSS/JS loading: see <dancer_directory>/views/layout/
  • Add Javascript code to be loaded when the document is ready: see <dancer_directory>/views/layout/ (the <javascript> at the bottom).
  • Update bootstrap: run <dancer_directory>/bin/update_bootstrap
  • Update Font-Awesome: run <dancer_directory>/bin/update_fontawesome
  • Update jQuery: You'll have to do it manually. See the README file.


Try the Dancing Deployment wizard.

Fork me

GitHub repository

Email me

gordon at cshl dot edu