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

StackOverflow https://stackoverflow.com/questions/10436815

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?

Was it helpful?

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

OTHER TIPS

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.

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

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

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

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 .

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.

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")" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top