Spring MVC with Bootstrap for Front-End Development
Last Updated :
06 Sep, 2024
Spring MVC is a powerful framework within the Spring ecosystem designed for building robust web applications. MVC stands for Model-View-Controller. It provides a clear separation of concerns between the model, view, and controller layers, allowing developers to manage the complexity of large-scale web applications efficiently. Bootstrap, on the other hand, is a popular front-end framework that simplifies the process of designing responsive and visually appealing web interfaces. When combined, Spring MVC and Bootstrap enable developers to create dynamic web applications with a polished and professional front end.
Spring MVC
Spring MVC is a web framework within the larger Spring framework designed to build web applications by following the MVC design pattern. It provides a robust structure for developing scalable, maintainable, and secure Java-based web applications.
- Model: Represents the application's data and business logic. It is responsible for retrieving, processing, and storing the data that the application uses.
- View: Responsible for rendering the user interface, typically in the form of HTML, JSP, or Thymeleaf templates. The view displays the data provided by the model in a user-friendly format.
- Controller: Handles incoming HTTP requests, processes them, and returns a response.
Bootstrap Framework
Bootstrap is a popular front-end framework for building responsive and mobile-first web pages. Developed by Twitter, Bootstrap provides a set of CSS and JavaScript components that simplify the process of creating visually appealing and consistent web designs.
- Responsive Design: Bootstrap uses a grid system that allows developers to create layouts that automatically adjust to different screen sizes and devices.
- Pre-Built Components: It includes a variety of pre-designed components such as buttons, forms, modals, carousels, navigation bars, and more, which can be easily customized to fit the needs of a web application.
- Cross-Browser Compatibility: Bootstrap is designed to work across all modern browsers, ensuring that your web application looks consistent on any platform.
Prerequisites:
Before diving into the integration of Spring MVC with Bootstrap, ensure you have the following prerequisites:
- Java Development Kit (JDK)
- Spring Framework
- Maven or Gradle
- IDE (Integrated Development Environment)
- Basic knowledge of HTML, CSS, and JavaScript
- Basic knowledge of Bootstrap
Integrating Bootstrap with Spring MVC
Here we provide a basic example to integrate Bootstrap with the Spring MVC framework. We will use Thymeleaf for rendering the frontend and backend dynamically.
Step 1: Creating Spring Application
First, create a Spring Boot application project using Spring Initializr with the necessary dependencies. Below is the build.gradle configuration for the project.
Dependencies:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}Project Structure:
After creating the project, the folder structure will look like the below image:
Step 2: Create the HTML File
Once Spring Boot application is created then we created a HTML file in the template folder which is located in the resource folder. In this HTML file we provide a basic web page layout like navbar, main section and footer with bootstrap classes. Below we provide that source code for your reference.
index.html:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.navbar-brand,
.nav-link {
color: white !important;
font-weight: bold;
}
main,footer {
height: auto;
background-color: rgb(241, 241, 241);
}
</style>
<body>
<header class="bg-success">
<nav class="navbar navbar-expand-sm navbar-light bg-success">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse"
data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav m-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Home
<span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
<form class="d-flex my-2 my-lg-0">
<input class="form-control me-sm-2" type="text" placeholder="Search" />
<button class="btn btn-light my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="container p-5">
<div class="contentdata mt-2">
<h5 class="text text-center text-success">Welcomt To</h5>
<h1 class="text text-center text-success">GeeksForGeeks</h1>
<br>
</div>
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-secondary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card text-dark bg-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-dark bg-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-dark bg-light mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-dark mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-success">
<div class="container p-3">
<div class="row">
<div class="col-md-2">
<h6 class="text text-center text-white">Social Media</h6>
</div>
<div class="col-md-2">
<h6 class="text text-center text-white">Contact</h6>
</div>
<div class="col-md-2">
<h6 class="text text-center text-white">Company</h6>
</div>
<div class="col-md-2">
<h6 class="text text-center text-white">Courses</h6>
</div>
<div class="col-md-2">
<h6 class="text text-center text-white">Updates</h6>
</div>
<div class="col-md-2">
<h6 class="text text-center text-white">Other Links</h6>
</div>
</div>
</div>
</footer>
</body>
</html>
Step 3: Create the Controller Class
Once Basic HTML User Interface is created. Then we created a example controller java class by using @Controller Spring Annotation. In this class we created a GET mapping request with method name getIndexPage() this method can able to handle the HTML file by using Thymeleaf. The Thymeleaf framework can able to render the HTML file from this Spring Boot code.
ExampleController.java:
Java
package com.app;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ExampleController {
// Handles GET requests to the root URL
@GetMapping("/")
public String getIndexPage() {
// Returns the name of the Thymeleaf template to be rendered
return "index";
}
}
Step 4: Run the Application
Once Development is completed. Then we run this Spring Boot application as Spring Boot App. And by default, this application runs on port number 8080 with tomcat server.
Output:
When you access the application in your browser, you should see a webpage with a responsive navigation bar, a grid of Bootstrap cards, and a footer with various sections. The layout should adjust appropriately to different screen sizes, demonstrating the responsiveness provided by Bootstrap.
http://localhost:8080/
Conclusion
By integrating Spring MVC with Bootstrap, you can leverage the powerful features of both frameworks to develop modern, responsive, and visually appealing web applications. This combination streamlines the development process, allowing you to focus on building functional and engaging user interfaces while maintaining a structured and maintainable backend.
Similar Reads
10 Spring Boot Features That Make Java Development Easier Spring boot, which is developed by the renowned Spring team, has made Java Programming much easier. Think of it as a toolbox full of handy tools that save a lot of time and effort for Java developers and make the user experience much better. With the Spring Boot, developers don't have to write the s
6 min read
Why Bootstrap is used for mobile application developments ? Bootstrap is an open-source CSS framework that was developed by Mark Otto. It is mobile-friendly which means the templates render well on every device type. Bootstrap has all the basic templates available needed for basic website development. The framework has various forms, navbar, panels, jumbotro
4 min read
Hot Reload with Spring Boot DevTools Hot reloading allows developers to see changes made to their application in real-time without restarting the server. In Spring Boot, this is achieved through Spring Boot DevTools. This tool significantly enhances development by reducing the time required to see changes in the application.Hot Reload
3 min read
Difference Between Struts and Spring MVC When developing Java-based web applications, choosing between Struts and Spring MVC is crucial for ensuring scalability and maintainability. Both frameworks follow the Model-View-Controller (MVC) architecture, but they differ in their approach and flexibility. Struts, an older and once-dominant fram
5 min read
Spring Boot Setup with Kotlin Spring Boot is one of the best frameworks available to build full-stack enterprise applications. Initially, Spring was used to build stand-alone applications on the Java Platform supporting easy-to-develop and providing lots of handy features to ease the application development. Why Kotlin is Used?T
5 min read
Spring Boot - Project Deployment Using Tomcat Spring Boot is a microservice-based framework and making a production-ready application in it takes very little time. Spring Boot is built on the top of the spring and contains all the features of spring. And is becoming a favorite of developers these days because it’s a rapid production-ready envir
5 min read
How to Create a Spring Boot Project? Spring Boot is built on top of the spring and contains all the features of spring. It is one of the most popular frameworks for building Java-based web applications and microservices. It is a favorite among developers due to its rapid, production-ready environment, which allows developers to focus o
6 min read
How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
Spring Boot @Controller Annotation with Example Spring is one of the most popular frameworks for building enterprise-level Java applications. It is an open-source, lightweight framework that simplifies the development of robust, scalable, and maintainable applications. Spring provides various features such as Dependency Injection (DI), Aspect-Ori
3 min read