How to use Twitter Bootstrap 3 with play framework

Question

I have been trying adding bootstrap's js and css files to public/javascripts and public/stylesheets application in play framework application. I donno why but I get a blank output. Is it the correct way to proceed for bootstrap v3 with play v2.3? If not what's the correct procedure to do it?

Answer 1

DO NOT divide downloaded library manually, what for? It contains relative paths.

Just unzip it i.e. into public/bootstrap folder and include JS/CSS from there as common public asset:

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

of course I assume that you have default route created by Play:

GET  /assets/*file   controllers.Assets.at(path="/public", file)

TIP: these folders you mentioned are just sample, it doesn't oblique you to anything... you can move/rename/delete them, whatever

Answer 2

In the new Play 2.4 version, you should use:

@routes.Assets.versioned("an_asset")

instead of:

@routes.Assets.at("an_asset")

But remember to keep this in the routes file:

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

Answer 3

in Play 2.5.x

<link rel="stylesheet" href="@routes.Assets.versioned("bootstrap/css/bootstrap.css")">
<script type='text/javascript' src='@routes.Assets.versioned("bootstrap/js/bootstrap.js")'></script>

Answer 4

In the build.sbt file add the following:

resolvers ++= Seq(
  "webjars"    at "http://webjars.github.com/m2"
)

libraryDependencies ++= Seq(
  "org.webjars"               %% "webjars-play"       % "2.3.0",
  "org.webjars"               % "bootstrap"           % "3.0.0" exclude("org.webjars", "jquery"),
  "org.webjars"               % "jquery"              % "1.8.3"
)

Answer 5

My solution was as follows:

In build.sbt:

libraryDependencies ++= Seq(
    "org.webjars" % "bootstrap" % "3.3.7"
)

In conf/routes, ensure you have the following line: (This should be included by default unless you deleted it)

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

In your file.scala.html file, you include bootstrap like so:

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.min.css")">
<script src="@routes.Assets.versioned("lib/bootstrap/js/bootstrap.min.js")" crossorigin="anonymous"></script>

• WebJars documentation