How to Add Bootstrap Css and JQuery To Spring Boot MVC Application

Table of Contents

How to add Bootstrap, Font-Awesome and Jquery to spring Boot Project

How to add Bootstrap, Font-Awesome and Jquery to spring Boot Project

Introduction

Twitter Bootstrap is one of the most popular front-end frameworks for responsive web design and development.

Font Awesome provides us with scalable vector icons that can be customised. Needless to say, anything about Jquery, since it is the number 1 Javascript framework and has been so from last 10 years.

It is Imperative that for your Spring Boot MVC based application you will require either of the above technologies to make your web pages look better.

Add Maven Dependencies

We need to add dependency for

Jquery
Bootstrap
FontAwesome

Apart from above, we need to add a dependency for web jars locator which lets us locate the CSS and JS files without providing the exact version of files.

<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>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>font-awesome</artifactId>
			<version>4.7.0</version>
		</dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery</artifactId>

</dependency>

<groupId>org.webjars</groupId>

<artifactId>bootstrap</artifactId>

</dependency>

<groupId>org.webjars</groupId>

<artifactId>webjars-locator</artifactId>

</dependency>

<groupId>org.webjars</groupId>

<artifactId>font-awesome</artifactId>

</dependency>

Annotations

Make sure you have either of the annotations in your Spring Boot
@SpringBootApplication
or
@EnableWebMvc

@SpringBootApplication is equivalent of using all three @Configuration, @EnableWebMvc and @ComponentScan
@SpringBootApplication = @Configuration + @EnableWebMvc+@ComponentScan

Add the reference in HTML pages

In the HTML page, you need to provide link to CSS and javascript src files location. Add the below head section in your *.html file
Note that the path doesn’t contain any specific version of CSS file or js files, thanks to web jars-locator dependency. That would mean that even if you change the version in your pom.xml there is no need to change any reference in HTML

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Login</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <base href="/"/>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css"></link>
</head>

<head>

<title>Login</title>

</head>

Add the HTML

You can use any of the above CSS classes from bootstrap and font awesome or js files from Jquery with your HTML pages.

<div class="container">
		
		<a href="/login" class="btn btn-primary"><span class="fa fa-user"></span> SignIn</a>
        <a href="/logout" class="btn btn-danger">Logout <span class="fa fa-sign-out"></span> </a>
         <a href="/facebook" class="btn btn-primary">Facebook <span class="fa fa-facebook"></span> </a>       
        <a href="/google" class="btn btn-danger"> Google <span class="fa fa-google-plus"></span> </a> 
        <a href="/linkedin" class="btn btn-primary">LinkedIn <span class="fa fa-linkedin"></span> </a> 
 </div>

<a href="/login" class="btn btn-primary"><span class="fa fa-user"></span> SignIn</a>

<a href="/logout" class="btn btn-danger">Logout <span class="fa fa-sign-out"></span> </a>

<a href="/facebook" class="btn btn-primary">Facebook <span class="fa fa-facebook"></span> </a>

<a href="/google" class="btn btn-danger"> Google <span class="fa fa-google-plus"></span> </a>

<a href="/linkedin" class="btn btn-primary">LinkedIn <span class="fa fa-linkedin"></span> </a>

</div>

Run the application

For above code, I got the following output. Bootstrap button classes and icons from font-awesome have been applied to the buttons.
Adding Bootstrap ,Font Awesome and Jquery to SPring Boot