How to integrate SpringBoot with Bootstrap and JQuery

Bootstrap is the most popular front-end framework, includes: HTML, CSS, and JavaScript. So the the tutorial, JavaSampleApproach will guide you through the steps of integrating SpringBoot and Bootstrap + JQuery with 3 approaches:

– Manually download Bootstrap
– Include Bootstrap from a CDN
– Use WebJars

Related articles:
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot
How to integrate Http Angularjs with Spring MVC | Spring Boot

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: 1.5.1.RELEASE
– Bootstrap framework
– JQuery

II. Practice – SpringBoot with Bootstrap and JQuery

Create a simple SpringBoot project, using Ajax JQuery to get messages from server, then shows it on Bootstrap Modal view.

Step to do
– Create SpringBoot project & install Bootstrap
– Create a Thymeleaf Html page
– Create a simple RestController
– Create a simple Ajax GET
– Run & Check results

1. Create SpringBoot project & install Bootstrap

Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
– For Template Engines, choose Thymeleaf
– For Web MVC, choose Web->Web

Spring Boot Bootstrap - dependencies

Open pom.xml file to check dependencies:

To install Bootstrap and JQuery, we have 3 approaches:
– Manually download Bootstrap
– Include Bootstrap from a CDN
– Use WebJars

1.1 Manually download Bootstrap

Install Bootstrap

– Go to getbootstrap.com/getting-started/, download Compiled and minified CSS, JavaScript, and fonts Bootstrap as below image:

Spring Boot Bootstrap - Download

– After downloading, we have a file: bootstrap-3.3.7-dist.zip. Rename file name to bootstrap-3.3.7.zip, then extract it, we have a folder – bootstrap-3.3.7. Copy the folder – bootstrap-3.3.7 under /src/main/resources/static folder of the SpringBoot project.

>>> Done for installing Bootstrap!

Install Jquery

– Go to Jquery site, download production jQuery 3.2.1
– Place the jquery-3.2.1.min.js file under folder: /src/main/resources/static/jquery.

>>> Done for installing JQuery!

Spring Boot Bootstrap - manual install

1.2 Include Bootstrap from a CDN

MaxCDN provides CDN support for Bootstrap’s css and JavaScript:

Details with html file:

1.3 Use WebJars

WebJars are Jar files that contains client-web libraries (e.g. jQuery & Bootstrap). And we can use them with Maven dependency:

2. Create a Thymeleaf html page

Use Thymeleaf & Bootstrap to create a Modal view – bootstraphelloworld.html.

2.1 Manually Setup

– Configure Bootstrap & JQuery:

– Details:

2.2 Use CDN

– Change the configuration for Bootstrap & JQuery:

2.3 Use WebJars

– Change the configuration for Bootstrap & JQuery:

3. Create a simple RestController

Create a simple RestController with 2 RequestMappings:
– “/” is used to serve a view page – bootstraphelloworld.html.
– “/greeting” is used to serve a Rest Api.

4. Create a simple Ajax GET

Create a simple JQuery file getrequest.js that is used to open Bootstrap Modal, then getting data from server and filling data on Modal’s body.

5. Run & Check result

Build & Run the projects with SpringBoot App mode.
– Make a request: http://localhost:8080/, we have a first view:

Spring Boot Twitter Bootstrap - firstview

– Click on Open Modal button, we get a Bootstrap Modal view with a message from “/greeting” controller: Message From SpringBoot Service – Hello World!

Spring Boot Twitter Bootstrap - modal view

III. SourceCode

SpringBootTwitterBootstrapManualInstall
SpringBootTwitterBootstrapMaxCDN
SpringBootTwitterBootstrapWebjar


Related Posts



Got Something To Say:

Your email address will not be published. Required fields are marked *

*