Use bootstrap 4 with PlayFramework 2.6 (no CDN)

environment

Introducing Bootstrap 4

Download required files

bootstrap https://getbootstrap.com Download the compiled css and js. スクリーンショット 2018-10-16 15.13.43.png

Make sure you have the two files below.

jQuery https://jquery.com

I downloaded jquery-3.3.1.min.js.

popper https://popper.js.org

Download popper.js.

File installation

Play Framework project In project_name / public / javascripts /

Install three of. スクリーンショット 2018-10-16 15.35.42.png

Play Framework project In project_name / public / stylesheets /

main.scala.html

Add the code below to <head> of main.scala.html.

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">

Add the code below to <body> of main.scala.html. (In the order of jQuery, Popper, Bootstrap!)

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>

main.scala.html (full text)

@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
    <head>
  
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">

        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png ")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>

    </head>
    <body>

        @content

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>

    </body>
</html>

Try using bootstrap4 cheatsheet

https://hackerthemes.com/bootstrap-cheatsheet/

Paste your favorite parts into main.scala.html.

スクリーンショット 2018-10-16 15.51.40.png

I was able to confirm that it was enabled. Thank you for your hard work.

Recommended Posts

Use bootstrap 4 with PlayFramework 2.6 (no CDN)
How to use BootStrap with Play Framework
Use ProGuard with Gradle
Use Puphpeteer with Docker
Use XVim2 with Xcode 12.0.1
Use CentOS with LXD
Use ngrok with Docker
Use webmock with Rspec
Use WebJars with Gradle
Use jlink with gradle
Use Lambda Layers with Java
Use GDAL with Python with Docker
Use Thymeleaf with Azure Functions
Use pfx certificate with Okhttp3
Use Bulk API with RestHighLevelClient
Use SDKMAN! With Git Bash
Use multiple databases with Rails 6.0
Use Spring JDBC with Spring Boot
Use Ruby with Google Colab
Use SpatiaLite with Java / JDBC
Use log4j2 with YAML + Gradle
[Docker] Use whenever with Docker + Rails