CodeIn House

  • Laravel
  • WordPress
  • jQuery
  • Javascript
  • Contact
Home   JAVA   How to Integrate Twitter Bootstrap into Spring Boot Applicat ...

How to Integrate Twitter Bootstrap into Spring Boot Application in JSP Page?

March 24, 2018 by SNK

integrate bootstrap into spring boot application

In this tutorial we are going to see how to integrate twitter bootstrap in spring boot application in jsp page. As we all know that we can create awesome styles and look for our website by using twitter bootstrap, and latest release with bootstrap version 4 nothing gets better than ever.

We can integrate twitter bootstrap into our spring boot application in 3 ways.

  1. Using Content Delivery Network (CDN)
  2. Download and use directly inside the application with a link.
  3. Downloading bootstrap dependencies directly from the maven repository.

Lets get started

Here we are going to demonstrate each step one by one so i think you have your application ready. If you want to setup demo spring boot application you can read our tutorial in how to setup spring boot sample application using intellij and eclipse and get ready.

Step 1 – Content Delivery Network (CDN)

Using content delivery network CDN is the easiest way to integrate bootstrap into your application. You just have to go to official site and pull out the CDN links. I have fetched them already so that you can directly use them from here.

CSS

bootstrap.min.css
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

JS

Bootstrap Required Javascripts
1
2
3
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Not to forget that before every bootstrap js files we need jquery to make them work. Get jQuery CDN from the jquery official website.

1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Put these codes inside your <head> tag to make them use and test run your application to view the changes.

 

Step 2 – Download and Use Directly In the Application.

Download and use bootstrap 4 directly from the official website and unzip it into your application. I would like to unzip it inside static folder inside src/main/resources. Most of the static thing like icons and images are generally kept inside resources static folder.

Unzipping the download will show many files but we will only be needing with the files that inside the dist folder. Copy and import directly into your project.

After that just change the reference to the files you just kept. Check the code below :-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Integrate Bootstrap 4 Into Spring Boot Application (Codeinhouse Demo)</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
 
 
 
</head>
<body>
    <h5>Bootstrap Sample Application</h5>
 
 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="/js/bootstrap.js"></script>
</body>
</html>

Step 3 –  Using Web Jars

To integrate bootstrap into our spring boot application using webjars, just open the pom.xml file and add these piece of code inside it.

pom.xml
XHTML
1
2
3
4
5
6
7
8
9
10
11
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0</version>
</dependency>
 
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.9.1</version>
</dependency>

After that spring boot maps the webjars in their URL mapping and we can make use of it to reference our bootstrap classes and javascript. Take a look below.

CSS

CSS
1
<link rel="stylesheet" href="webjars/bootstrap/4.0.0/css/bootstrap.css">

JS

JS
1
2
<script src="webjars/jquery/1.9.1/jquery.js"></script>
<script src="webjars/bootstrap/4.0.0/js/bootstrap.js"></script>

Webjars is the by far easiest and convenient method to integrate bootstrap in our application because upgrading is easy and we dont have to worry about downloading again and integrate in our application.

We can easily change the version in our pom.xml file hit save and just make changes to our header and footer pages.

Thats it. If you have any trouble integrating bootstrap in these ways, feel free to comment below.

SHARE ON
Buffer

Enjoyed this article?

Like us on

JAVA bootstrap 4 integration in spring boot integrate bootstrap into spring boot application integrate bootstrap using webjars

Avatar for SNK

About SNK

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter

Leave a Reply Cancel reply

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

Get Connected !! With Us

TOP POSTS

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

TUTORIALS TILL DATE

  • September 2022 (6)
  • June 2021 (7)
  • October 2020 (5)
  • September 2020 (6)
  • September 2018 (14)
  • August 2018 (3)
  • July 2018 (4)
  • March 2018 (8)
  • February 2018 (5)
  • January 2018 (1)
  • December 2017 (2)
  • August 2017 (8)
  • May 2017 (1)
  • April 2017 (1)
  • March 2017 (4)
  • February 2017 (3)
  • January 2017 (4)

CATEGORIES

  • Angular (2)
  • CSS3 (3)
  • D3 (3)
  • HTML5 (7)
  • JAVA (11)
  • Javascript (20)
  • jQuery (8)
  • Laravel (35)
  • Others (3)
  • PHP (11)
  • Spring (2)
  • WordPress (10)

Top Categories

  • Angular
  • CSS3
  • D3
  • HTML5
  • JAVA
  • Javascript
  • jQuery
  • Laravel
  • Others
  • PHP
  • Spring
  • WordPress

Get in Touch

DMCA.com Protection Status

Recent Articles

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

© 2012-22 CodeIn House.  •  All Rights Reserved.