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?

Dumah

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

Pigg

I have done exactly the same, but responsive.min.css does not generate. File bootstrap.min.css generates ok. – Endurable

@sealskej: try to clean up and / restart your project and verify that you did not make any typos, should work tough.. – Pigg

Thanks. Clean and restart were first thinks, i tried for. By typos you mean syntax mistakes? – Endurable

Yes syntax mistakes could be, but also misspelled names, take a look at: objectify.be/wordpress/?p=475 – Pigg

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.

Piranesi

Answer 3

I'll throw in, to use Glyphicons with Bootstrap 2.2.2 and Play 2.0.4 I couldn't quite use the routes that adis posted above. I moved the two glyphicons files into the 'images' folder (the Play default, not 'img' which is the Bootstrap default) and added to my routes:

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

and this let me access the glyphicons like a normal bootstrap install, no messing with 'less' files etc

Running

I'll throw in this works on OS X, but glyphicons won't appear when deployed on an Ubuntu 10.04 Lucid server. No idea why, but that route from /img to /images simply will not work. Had to hand edit the bootstrap.css file for that server. I'd be interested to know if this Play routes method works on other OSes. – Running

Answer 4

Or you can follow this easy tutorial: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

I used it with Twitter Bootstrap 2.0.1 and Play 2.0

Armstead

just a note so you don't pull your hair out. Current stable release 2.0.1 will not work with latest bootstrap release. You have to pull the master branch. The reason is incompatible less version. The link nico shared mentions that somewhere at the bottom. – Agogue

Answer 5

I use bootstrap 2.0 with play 2.0 . Everithing work fine,exept the helper.twitterbootstrap.

I think it maje class for twitterbootstrap 1.x ,not for 2.0 . Any solution?

Edit : it's work

1. I create package helper/twitterBootstrap2 in app/view
2. Then i copy path_to_play/play2.0.1/framework/src/play/src/main/scala/views/helper in helper/twitterBootstrap2
3. I modifie it like i want.
4. And i import @import helper.FieldConstructor and @import helper.twitterBootstrap2._ and @impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f in my view where i want to use it

Torose

Answer 6

You just update twitter bootstrap and also update your own code (the bootstrap specific code you wrote). Look at the following link for more information about updating to the newest version: http://twitter.github.com/bootstrap/upgrading.html .

Tetreault

Answer 7

I had to do a couple things, including using the latest version of Play 2.0 due to some issues the released version had with compiling the less files used by bootstrap. Follow the instructions here https://github.com/playframework/Play20/wiki/BuildingFromSource to build from source. Then I placed all of the bootstrap less files in the "app/assets/stylesheets/" directory of your application. Play should only compile "bootstrap.less" so you need to add the following to "project/Build.scala":

val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
  lessEntryPoints <<= baseDirectory(_/"app"/"assets"/"stylesheets" ** "bootstrap.less")
)

If you are using any of the bootstrap javascript plugins you'll need to add them to "public/javascripts" and include them in your HTML.

Semiporcelain

Answer 8

SCRIPT METHOD (from here)

1- Copy bootstrap’s less files into app/assets/stylesheets/bootstrap

2- Run this script in app/assets/stylesheets/bootstrap by copying and pasting it in a shell/terminal (the script will rename the partial files and edit the path of the imports):

for a in *.less; do mv $a _$a; done 
sed -i 's|@import "|@import "bootstrap/_|' _bootstrap.less 
mv _bootstrap.less ../bootstrap.less
sed -i 's|@import "|@import "bootstrap/_|' _responsive.less 
mv _responsive.less ../responsive.less

Notice: the above script doesn't work on Mac! On Mac use this:

for a in *.less; do mv $a _$a; done 
sed -i "" 's|@import "|@import "bootstrap/_|' _bootstrap.less
mv _bootstrap.less ../bootstrap.less
sed -i "" 's|@import "|@import "bootstrap/_|' _responsive.less 
mv _responsive.less ../responsive.less

3- Include the compiled CSS

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

Mickens