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

Answer 2

A quick and maintainable approach is to use WebJars (a client-side dependency manager by Typesafe Dev Advocate: James Ward), with a few lines in your Build.scala, you can easily add Bootstrap (e.g. version 2.3, 3.0, etc) - and much more - to your project.

1) Here's the documentation example for adding Bootstrap 2.3 to Play 2.1, in your Build.scala:

import sbt._ import Keys._ import play.Project  object ApplicationBuild extends Build {   val appName         = "foo"   val appVersion      = "1.0-SNAPSHOT"    val appDependencies = Seq(     "org.webjars" %% "webjars-play" % "2.1.0-2",     "org.webjars" % "bootstrap" % "2.3.2"   )    val main = Project(appName, appVersion, appDependencies).settings() } 

2) Then add an entry to your routes file:

GET     /webjars/*file                    controllers.WebJarAssets.at(file) 

3) Add the relevant links to your templates:

<link href='@routes.WebJarAssets.at(WebJarAssets.locate("css/bootstrap.min.css"))' rel='stylesheet' > <script src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))' type='text/javascript' ></script> 

Note that WebJars will actually try and find your resources for you, you don't need to full qualify the asset locations.