How to add Bootstrap CSS and JS to Thymeleaf

June 10, 2020 No comments Thymeleaf Bootstrap CSS Style

1. Introduction

In this article, we are going to present several ways to add Bootstrap library to the Thymeleaf project. We will include Bootstrap assets using static resources, content delivery network, and webjar libraries.

2. Add Bootstrap using WebJars

WebJars are front-end libraries packed into Java Archive files (JAR). They allow us to use project build tools like Maven or Gradle to download client-side dependencies just like any other external libraries.

In Maven projects we can simply add Boostrap webjar dependency in the POM.xml file like in following example:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0-2</version>
</dependency>

and for gradle projects we can use the following snippet:

compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-2'

Bootstrap requires jQuery and popper.js library and luckily we don't have to add these frameworks separately because Bootstrap webjar includes these projects as dependencies.

Now we can add Bootstrap CSS and JS files in our Thymeleaf template like in the following example:

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot Thymeleaf - Bootstrap WebJars</title>

    <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col">

        </div>
    </div>
</div>

<script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script>

</body>
</html>

If you are looking for more WebJars, check the following links:

3. Adding Bootstrap library using static asset files

Let's take a look at another way to add the Bootstrap library to the Thymeleaf template.

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot Thymeleaf - Bootstrap Static Files</title>

    <link th:rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css} "/>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col">

        </div>
    </div>
</div>

<script th:src="@{/assets/jquery/jquery.min.js}"></script>
<script th:src="@{/assets/popper.js/popper.min.js}"></script>
<script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>

</body>
</html>

In this example we used Bootstrap CSS and JS files included in Spring Boot default static resources directory in the organized in the following structure:

/resources/assets/bootstrap/css/bootstrap.min.css
/resources/assets/bootstrap/js/bootstrap.min.js
/resources/assets/jquery/jquery.min.js
/resources/assets/popper.js/popper.min.js

4. Add Bootstrap using CDN

Content Delivery Network is a distributed system whose main task is to provide content in the shortest possible time to which many users from different places have access.

Bootstrap, jQuery, and many other popular libraries can be included in the website using CDN links.

In the following example we present how to ue CDN to include Bootstrap in Thymeleaf template:

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot Thymeleaf - Bootstrap CDN</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col">

        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.1/cjs/popper.min.js"
        integrity="sha256-T3bYsIPyOLpEfeZOX4M7J59ZoDMzuYFUsPiSN3Xcc2M=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

</body>
</html>

5. Conclusion

In this article, we presented several ways to include the Bootstrap library in Thymeleaf template. Which method is better for your project depends on many factors. For those who don't like external links on their pages, we recommend WebJars or even static files included in the project structure. For those who want to speed up resources uploading time, we will recommend CDN.

{{ message }}

{{ 'Comments are closed.' | trans }}