Adding Bootstrap 3 to Play 2.3

Bootstrapify.md

Steps I took to add Bootstrap to the Play 2.3 Hello World app.

1. Added the following dependencies to the build.sbt file for the project

  "org.webjars" %% "webjars-play" % "2.3.0-2",
  "org.webjars" % "bootstrap" % "3.3.2",
  "org.webjars" % "jquery" % "2.1.3"

The jquery one isn't necessary, but I added it because I might want it in the future.

2. I added the following lines to app/views/main.scala.html.

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

Unlike the directions here, I found that I was not able to use @routes.WebJarAssets.at() because it could not find the WebJarAssets. So, I tried the instructions here and just used @routes.Assets.at() and this worked. The next trick was figuring out the correct URL where they get generated within /lib. After some trial and error I got it to work with the lines above.

3. Added a bootstrap field constructor template (example).

@(elements: helper.FieldElements)
<div class="form-group @if(elements.hasErrors) {has-error}">
    <label for="@elements.id" class="control-label">@elements.label</label>
    @elements.input
    <span class="help-block">@elements.infos.mkString(", ")</span>
    <span class="help-block">@elements.errors.mkString(", ")</span>
</div>

This will bootstraipify some of the elements in your HTML

4. Use the field constructor template in your view

@implicitField = @{ FieldConstructor(bootstrapFieldConstructorTemplate.f) }