Spring Boot with Bootstrap Example using Web Jars

Spring Boot with Bootstrap Example using Web Jars

in published on April 22, 2018

Overview

In this tutorial, we show you how to integrate Spring Boot with Bootstrap 4 using Web Jars Maven in Eclipse IDE. In this example, we will using the Spring Boot 2.0.1, spring-boot-starter-web, Bootstrap 4.0.0 and jQuery 3.0.0.
Follow the steps mentioned below to develop the Spring Boot Tutorial.

Spring Boot Integrating With Bootstrap 4

Watch tutorial


Prerequisites

Create project directory structure

The following screenshot shows final structure of the project.
project structure spring boot with bootstrap 4

Creating a web application with Spring Boot

Launch Eclipse IDE. Go to File -> New -> Other... Select Spring Starter Project under Spring Boot category then click Next as shown below


Spring Starter Project

In the next screen, you enter the content as shown below then click Next
Spring Boot With Bootstrap 4 Init

In the next step, you choose Spring Boot Version is 2.0.1 and choose the Web, then click Finish.
Spring Boot With Bootstrap 4 dependencies

Project Dependencies

We will add the dependencies for org.webjars bootstrap 4.0.0 and org.apache.tomcat.embed
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>4.0.0</version>
</dependency>
<dependency>
 <groupId>org.apache.tomcat.embed</groupId>
 <artifactId>tomcat-embed-jasper</artifactId>
 <scope>provided</scope>
</dependency>
The updated pom.xml file will have the following code
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

 <groupId>com.jackrutorial</groupId>
 <artifactId>SpringBootWithBootstrapTutorials</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>

 <name>SpringBootWithBootstrapTutorials</name>
 <description>Demo project for Spring Boot</description>

 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.0.1.RELEASE</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>

 <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  <java.version>1.8</java.version>
 </properties>

 <dependencies>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
  </dependency>
  <dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>4.0.0</version>
  </dependency>
  <dependency>
   <groupId>org.apache.tomcat.embed</groupId>
   <artifactId>tomcat-embed-jasper</artifactId>
   <scope>provided</scope>
  </dependency>
 </dependencies>

 <build>
  <plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
   </plugin>
  </plugins>
 </build>


</project>

User Controller

Create a UserController class under com.jackrutorial.controller package with the following contents.
package com.jackrutorial.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {
 
 @RequestMapping(value="/home", method=RequestMethod.GET)
 public ModelAndView home() {
  ModelAndView model = new ModelAndView();
  model.setViewName("home");
  
  return model;
 }
}

Configure view resolvers in Spring Boot


We configure the view resolver in application.properties file of Spring Boot Web. The updated application.properties file will have the following contents.
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

Creating JSP Views

Create jsp folder under src\main\webapp\WEB-INF\ folder.
Create home.jsp file under src\main\webapp\WEB-INF\jsp\ folder and write the following contents.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Bootstrap 4 Example</title>
 <link href="webjars/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
 <script src="webjars/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
 <script src="webjars/jquery/3.0.0/jquery.min.js" ></script>
</head>
<body>
 <div class="container">
  <h1>Bootstrap 4 Example</h1>
  <table class="table">
   <thead>
    <tr>
     <th scope="col">#</th>
     <th scope="col">First name</th>
     <th scope="col">Last name</th>
     <th scope="col">Email</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th scope="row">1</th>
     <td>Admin</td>
     <td>Rutorial</td>
     <td>admin@jackrutorial.com</td>
    </tr>
    <tr>
     <th scope="row">2</th>
     <td>Support</td>
     <td>Rutorial</td>
     <td>support@jackrutorial.com</td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>

Test Spring Boot Application

  • Right click to the Project and follow the below steps:
  • select Run As -> Maven clean.
  • select Run As -> Maven install.
  • select Run As -> Spring Boot App.
Type the following URLs in browser's address bar to open the home page.
http://localhost:8080/home
Spring Boot With Bootstrap 4 web

Previous Post
Next Post

post written by: