How to use Twitter Bootstrap 2 with play framework 2.x

Question

I know that current Play! distribution has a helper for Bootstrap 1.4. What should I do if I want to use the current version of Bootstrap?

Answer 1

I'm using the 2.0.1 twitter bootstrap with Play 2.0. You can download a specific version here: https://github.com/twitter/bootstrap/tags . Once you download the twitter bootstrap you have two options:

• you can choose to just use the bootstrap.min.css (and bootstrap-responsive.css) and bootstrap.min.js, all these file can be placed in the public folder.

• or you can use the less files for the css. If you want to use the less files you make the following package (in the root of your app folder):

  assets.stylesheets.bootstrap

And in you build scala you define that these .less files should be compiled:

// Only compile the bootstrap bootstrap.less file and any other *.less file in the stylesheets directory 
def customLessEntryPoints(base: File): PathFinder = ( 
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "responsive.less") +++ 
    (base / "app" / "assets" / "stylesheets" * "*.less")
)

val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
  // Add your own project settings here
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
)

And then you can include it in your templats:

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/responsive.min.css")" />

EDIT: 2012-09-17: If you plan to build Play from source, follow this tutorial the Play wiki page: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012-09-21: When using the bootstrap you always have to make a choice whether you would change the folder images or adding a route to the two static images used by the bootstrap:

EDIT: 2013-03-11: As xref pointed, I made a mistake: img must be images:

GET     /assets/img/glyphicons-halflings-white.png      controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png")
GET     /assets/img/glyphicons-halflings.png            controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png")