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

playframework, playframework-2.0, twitter-bootstrap, twitter-bootstrap-2

Solution

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")

Problem

Original source