Epoch 5 — Bootstrap Integration
Set up a reusable Bootstrap layout for all JSP pages, serve static assets properly, and make home.jsp the default landing page.
Architechture for project:
1
2
3
4
5
6
7
8
9
10
11
/webapp
├── /views
├ └── home.jsp
└── /assets
├── css/
├── bootstrap.min.css
└── style.css
├── js/
├── bootstrap.bundle.min.js
└── main.js
└── img/
1. Download & Add Bootstrap
Download Bootstrap from https://getbootstrap.com.
- Place:
1 2
bootstrap.min.css → ./assets/css/ bootstrap.bundle.min.js → ./assets/js/
- Link them:
1
2
3
<link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.bundle.min.js"></script>
2. Create a simple Home page
A single, reusable home page that pulls in Bootstrap and renders a body section.
./webapp/views/home.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home - JSP Shop</title>
<link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="${pageContext.request.contextPath}/views/home.jsp">
JSP Shop
</a>
</div>
</nav>
<main class="container py-4">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h3 mb-3">Welcome to JSP Shop</h1>
<p class="mb-0">
This is a simple Home page.
for consistent UI with Bootstrap.
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-light border-top mt-5">
<div class="container py-3 text-center small text-muted">
© 2025 Hieu Nguyen - AI lecturer - FPT University Can Tho
</div>
</footer>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/main.js"></script>
</body>
</html>
3. Publish (serve) assets correctly
Place your files under ./webapp/assets/…. They will be publicly available at:
1
2
3
http://localhost:8080/<context>/assets/css/style.css
http://localhost:8080/<context>/assets/js/main.js
http://localhost:8080/<context>/assets/images/logo.png
Examples:
- style.css example
1
2
body { min-height: 100vh; }
.navbar-brand { font-weight: 700; letter-spacing: .3px; }
- main.js example:
1
console.log("Assets loaded (Model 1 + Bootstrap).");
Tip: Always prefix asset URLs in JSP with
${pageContext.request.contextPath}to work under any context path.
To publish resources then web.xml:
1
2
3
4
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/assets/*</url-pattern>
</servlet-mapping>
-
default — Refers to the Default Servlet provided by the servlet container (Tomcat, Jetty, etc.), which is responsible for serving static resources.
-
/assets/* — This tells the servlet container to serve all requests starting with /assets/ directly from the file system under src/main/webapp/assets.
- This avoids your MVC controllers intercepting these static files.
4. Configure a welcome-file (open to Home by default)
- Update web.xml:
1
2
3
4
...
<welcome-file-list>
<welcome-file>views/home.jsp</welcome-file>
</welcome-file-list>
- Now opening:
http://localhost:8080/<your-context>/
6. Source demo
Source demo: jsp-shop-05