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.

biesior · Accepted Answer · 2014-03-23 09:03:23Z

3

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 i.e. between styles and images (and/or scripts) so spliting them requires from you fixes in the code which is absolutely redundant.

edited Mar 23, 2014 at 9:03

answered Mar 23, 2014 at 8:53

biesior

55.8k10 gold badges128 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Incpetor Over a year ago

Yes.. That works error free.. thanks a lot @biesior I will try the other part as well...

boraas · Accepted Answer · 2021-01-25 11:49:43Z

0

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.

answered Jan 25, 2021 at 11:49

boraas

9421 gold badge10 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related