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.
- Using Content Delivery Network (CDN)
- Download and use directly inside the application with a link.
- 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
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> |
JS
|
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.
|
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
|
1 |
<link rel="stylesheet" href="webjars/bootstrap/4.0.0/css/bootstrap.css"> |
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.
Leave a Reply