How to Add Bootstrap and jQuery in a Spring Boot project

Details
Written by  
Last Updated on 08 July 2021   |   Print  Email


In this article, I’d like to share with you 3 ways for adding Bootstrap and jQuery to a Spring Boot project – with pros and cons of each way.

You know, jQuery is a popular Javascript library and Bootstrap is a popular CSS library – both are the de factor standard client-side technologies for web development. And Spring is a popular framework that is used for developing enterprise Java applications, with Spring Boot is a set of tools and libraries that make Spring development a lot easier.

So using Bootstrap and jQuery in a Spring Boot project is developer’s common choice.

 

1. Add Bootstrap and jQuery via CDN

This is the most common way for adding Bootstrap and jQuery in a web development project: refer to files hosted on a Content Delivery/Distribution Network (CDN).

For jQuery, just use a script tag that refers to the official jQuery’s CDN like this (compressed version):

<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
For uncompressed version of jQuery:

<script src=https://code.jquery.com/jquery-3.6.0.js></script>
For Bootstrap, add the following link tag to the document’s head:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
	rel="stylesheet" 
	integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
	crossorigin="anonymous">
If you need to use Bootstrap’s Javascript, add this script tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
	integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
	crossorigin="anonymous"></script>


 

Notes: The integrity attribute contains a security code that ensures the file is not modified on the way from server to client; and the crossorigin=”anonymous”attribute allows the script to be loaded from a different domain.

You can also use Bootstrap and jQuery files that are hosted on Google’s CDN, Microsoft’s CDN…

Pros: simple and easy to setup (just add some links). Boots reliability and response times of your website as CDNs deliver the resources geographically with data centers around the globe.

Cons:internet connection is always required, and you cannot modify the code of jQuery or Bootstrap files if needed.

 

2. Add Bootstrap and jQuery Files to the project

In this second way, you have to download jQuery and Bootstrap files on to your local computer, and put them into the static folder inside your Spring Boot project – something like this:

project structure

Then in the view layer, you refer to these files in the HTML template file like this:

<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>
<meta charset="ISO-8859-1">
<title>Homepage</title>
	<link rel="stylesheet" th:href="/@{/bootstrap.min.css}">
	<script th:src="/@{/jquery-3.5.1.min.js}"></script>
	<script th:src="/@{/bootstrap.min.js}"></script>
</head>
<body>
...
</body>
</html>
Here, you should use Thymeleaf’s syntax th:href and th:src so it will load the files properly.

Pros: You have total control, e.g. modify the code of jQuery and Bootstrap as you wish. Can be used offline.

Cons: It take times to setup (manually download the files and put them to the project). Response time maybe slow as no CDN is used. Your website hosts the files itself.


3. Add Bootstrap and jQuery via WebJars

In this way, you add jQuery and Bootstrap files by declaring some dependencies in your project’s pom.xml file like this:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.4.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.3.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator-core</artifactId>
</dependency>
Maven will download the Java JAR files that contain the files of jQuery and Bootstrap on to your computer – something like this:

webjars for jquery and bootstrap

This is possible by using WebJars, which are client-side libraries packaged into JAR (Java Archive) files. Then load the files of jQuery and Bootstrap in a Thymeleaf template file like this:

<link rel="stylesheet" type="text/css" th:href="/@{/webjars/bootstrap/css/bootstrap.min.css}" />
<script type="text/javascript" th:src="/@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="/@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
 

Pros: Quick and easy to setup. No need to know where the files are. Can be used offline.

Cons: Response time can be slow as no CDN is used. Your website hosts the files itself. You cannot modify the code of jQuery and Bootstrap if needed.

 

To see the steps in action with a sample Spring Boot web application, watch the following video:

 

Other Spring Boot Tutorials:


About the Author:

is certified Java programmer (SCJP and SCWCD). He began programming with Java back in the days of Java 1.4 and has been passionate about it ever since. You can connect with him on Facebook and watch his Java videos on YouTube.



Add comment