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
Spring Security Integration with Spring Boot
Spring Security is a powerful and customizable authentication and access control framework for Java applications. It provides comprehensive security services for Java EE-based enterprise software applications. This article will integrate Spring Security with a Spring Boot application, covering confi
5 min read
Multi-Module Project With Spring Boot
Multi-Module project with Spring Boot refers to a project structure where multiple modules or subprojects are organized under a single parent project. Each module can represent a distinct component, functionality, or layer of the application, allowing for better organization, maintainability, and co
6 min read
Spring Security - Custom Form Login with Example
Spring Security is a framework that allows a programmer to use JEE components to set security limitations on Spring-framework-based Web applications. In a nutshell, it’s a library that can be utilized and customized to suit the demands of the programmer. Because it is a part of the same Spring famil
8 min read
Spring Boot – Setting Up a Spring Boot Project with Gradle
Spring Boot is a Java framework designed to simplify the development of stand-alone, production-ready Spring applications with minimal setup and configuration. It simplifies the setup and development of new Spring applications, reducing boilerplate code.In this article, we will guide you through set
4 min read
Properties with Spring and Spring Boot
Java-based applications using the Spring framework and its evolution into the Spring Boot and the properties play a crucial role in configuring the various aspects of the application. Properties can allow the developers to externalize the configuration settings from the code. Understanding how to wo
4 min read
Spring MVC @ModelAttribute Annotation with Example
In Spring MVC, the @ModelAttribute annotation binds a method parameter or method return value to a named model attribute and then exposes it to a web view. It refers to the property of the Model object. For example, if we have a form with a form backing object that is called "Student" then we can ha
8 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