|
Bootstrap is one of the most popular front-end framework for developing responsive web design. It includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects. The mixt of Bootstrap and Spring MVC gives a powerfull toolbox to develop a web application running in both desktop and mobile devices. |
|
This post presents a very concise and easy way to integrate Bootstrap to a Spring MVC web project.
Add bootstrap to your project dependency
You can add Bootstrap to your project by downloading a zip file from the project web site http://getbootstrap.com, then unzip the content and copy it to the webapp resources directory.
But it is more interesting to get it as project a maven dependency to your project. This is made possible by the client-side web libraries webjars
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.1.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.2.0</version>
<exclusions>
<exclusion>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
</exclusion>
</exclusions>
</dependency>
Bootstrap javascript components needs JQuery. That’s why Bootstrap has a dependency to JQuery.
In this post we made the choice to exclude Bootstrap version and to import 2.1.1 version of JQuery.
You can manage the version by defining a dependency management to the project pom.
Configure Spring
We need to add a resource handler for /webjars/** to associate it with classpath:/META-INF/resources/webjars/ located in the bootstrap-3.2.0.jar
@EnableWebMvc
@Configuration
@ComponentScan(basePackages = { "com.mycompany.myproject.web.controller" })
public class MvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
.................
..............
}
Add a bootstrap reference to the web page.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
</head>
<body>
<!-- YOUR CODE HERE -->
<script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Jboss config
JBoss has a specific library management and in some cases it can’t find files in webjars dependency.
This problem can be solved by unpackaging webjars jars using maven dependency plugin.
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unpack</id>
<phase>compile</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<overWrite>false</overWrite>
<outputDirectory>${project.build.directory}/classes</outputDirectory>
<excludes>**/maven/**, **/*.MF</excludes>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
Samples and components
You can find many samples and plugins for bootstrap that can gives you inspiration for your web application design.
I recommend those sites and projects:
- http://bootsnipp.com
- http://plugins.krajee.com
- http://github.com/eternicode/bootstrap-datepicker
- http://ashleydw.github.io/lightbox
The picture bellow presents a screenshot for a demo web application using bootstrap.
Samer Abdelkafi Blog 
I dont understand what i need to do in the Spring step. Can you help me? I created a web maven proyect, added the dependencies, I see the Jars but bootstrap code is not working.
Hi,
I need some extra information.
Are you using Spring in your project?
Do you deploy your application in tomcat?
You can check the configuration of a similar project using Webjars and Bootstrap in this link:
https://github.com/samer-abdelkafi/ng-project
You can find more information about configuring Webjars in this link:
http://www.webjars.org/documentation#springmvc
Thanks a lot for clear topic.
Thanks for sharing. Just one thing, you might want to put jQuery before Bootstrap.
Thank you for your comment.
That’s right, jQuery JS should be loaded before Bootstrap JS.
I updated the source code.
Is this still better than using Spring Mobile Device ?
Thank you, so much for this wonderfully simple solution.
On a side note, if using Spring Security, and enforcing access rights, as well as HTTPS, remember to add
Thanks for the info, is it possible to do the spring configuration in a spring XML configured environment?
Hi,
You are welcome.
Yes it’s possible to do configuration with Spring XML config file.