Link bootstrap.css file to scala.html page in Play framework

Question

I have a bootstrap.css file located at

C:\\Users\\comp\\Play_Framework\\test1\\public\\stylesheets\\bootstrap.css

I need to link this to my Login page located at

C:\\Users\\comp\\Play_Framework\\test1\\app\\views\\cal_login.scala.html

I have tried this in my HTML page

link rel="stylesheet" type="text/css" href="..../public/stylesheets/bootstrap.css"

and also

link rel="stylesheet" type="text/css" href="../../public/stylesheets/bootstrap.css"

but the page still looks without css content.Moreover, when I open Play 2.2.2 Project in eclipse the I can't find my bootstrap file. I have compiled and tried reopening but the file is just not getting compiled and added to the stylesheet directory.

Answer 1

In the view use default route for assets (you can find it at the bottom of conf/routes file:

<link rel="stylesheet" type="text/css" href='@routes.Assets.at("stylesheets/bootstrap.css")' />

It builds proper path to assets in /public directory.

De facto you can also use hardcoded path in view if you know it like:

<link rel="stylesheet" type="text/css" href='/assets/stylesheets/bootstrap.css' />

But if you'll decide in future to change ie /assets/... to /my-aasets/... you will need to fix manually all occurrences.

TIP you DON'T need to split Bootstrap (or other JS libraries) to folders that were created initially by Play, instead it's much better to keep them always in their original structure!

Just download and unzip Bootstrap to /public/bootstrap/ folder and then in your view/layout jest add proper paths:

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

Keep in mind that some libraries has relations ie between styles and images (and/or scripts) so spliting them requires from you fixes in the code which is absolutely redundant.

Answer 2

instead of copying bootstrap into the public-folder I would use webjars. You just add

libraryDependencies += "org.webjars" % "bootstrap" % "5.0.0-beta1"

to your build.sbt . Then you can use it in your view as:

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

For the next bootstrap version, you would only need to update the dependency in your build.sbt file.