How to create a Tab Panel using Bootstrap in Spring Boot Application. In this article, we will understand How to create a tab Panel using Bootstrap in Spring Boot.
We will create a simple spring boot application where we will demonstrate the use of the Bootstrap Tab Panel. It is simple and quite straightforward. As we will use thymeleaf, you just need to add the dependency of it.
Tab Panel using Bootstrap and Spring Boot
Create project new Spring boot project
Create a project using Spring Initializr. If you don’t know how to create a project using the same check this article https://codedec.com/tutorials/how-to-create-spring-boot-project-using-spring-initializr/
Import a Project
Now, it’s time to import the project into STS. Go to File > Import > Maven > Existing Maven Project > Next > Browse > Select the project > Finish. Now it will take time to import the project and will import all the dependencies in case you added.
Configure application. properties file
# change the port server.port=8888
Create a Controller
Create a TestController to handle requests. The request for the web page will be handle by the handler methods in the controller.
package com.example.thymeleaf.controller;
import java.util.Arrays;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
@Controller
public class TestController {
@GetMapping("/")
public String home(Model model) {
return "index";
}
}
- @Controller annotation marks the TestController class a Request Handler.
- Every request coming for the ‘/’ URL will be handled by the home() method. It would redirect you to the index page.
Create View using Thymeleaf
In the spring boot application, adding a thymeleaf template is quite simple. Go to src/main/resources/template folder and create an index.html file. Now inside the index.html file make sure to add the following code:
<html xmlns:th="http://www.thymeleaf.org">
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="ISO-8859-1">
<title>Tab Panel</title>
<!-- JavaScript Bundle with Popper -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<h5 align="center">Create Tab Panel</h5>
<ul class="nav nav-tabs mt-5">
<li class="nav-item"><a href="#home" class="nav-link active"
data-bs-toggle="tab">Home</a></li>
<li class="nav-item"><a href="#aboutus" class="nav-link"
data-bs-toggle="tab">About Us</a></li>
<li class="nav-item"><a href="#contactus" class="nav-link"
data-bs-toggle="tab">Contact Us</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h3>Home tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
vel porta ex. Nam sit amet ex nec arcu consequat dictum eu nec
velit. Sed mattis euismod malesuada. Donec mattis nibh a nulla
dictum, in rutrum metus fringilla. Phasellus tincidunt euismod
pellentesque. Curabitur eget est sagittis, pellentesque libero nec,
ornare massa. Suspendisse non imperdiet sem, vel gravida odio.
Pellentesque diam dui, venenatis quis metus et, luctus accumsan
erat. Cras eget metus nisl. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Fusce
tempor eget nisl id imperdiet. Cras ut convallis arcu, in tempor
libero.</p>
</div>
<div class="tab-pane fade" id="aboutus">
<h3>About Us tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
vel porta ex. Nam sit amet ex nec arcu consequat dictum eu nec
velit. Sed mattis euismod malesuada. Donec mattis nibh a nulla
dictum, in rutrum metus fringilla. Phasellus tincidunt euismod
pellentesque. Curabitur eget est sagittis, pellentesque libero nec,
ornare massa. Suspendisse non imperdiet sem, vel gravida odio.
Pellentesque diam dui, venenatis quis metus et, luctus accumsan
erat. Cras eget metus nisl. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Fusce
tempor eget nisl id imperdiet. Cras ut convallis arcu, in tempor
libero.</p>
</div>
<div class="tab-pane fade" id="contactus">
<h3>Contact US tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
vel porta ex. Nam sit amet ex nec arcu consequat dictum eu nec
velit. Sed mattis euismod malesuada. Donec mattis nibh a nulla
dictum, in rutrum metus fringilla. Phasellus tincidunt euismod
pellentesque. Curabitur eget est sagittis, pellentesque libero nec,
ornare massa. Suspendisse non imperdiet sem, vel gravida odio.
Pellentesque diam dui, venenatis quis metus et, luctus accumsan
erat. Cras eget metus nisl. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Fusce
tempor eget nisl id imperdiet. Cras ut convallis arcu, in tempor
libero.Messages tab content ...</p>
</div>
</div>
</div>
</body>
</html>
Run the Application
Now, Run the ThymeleafLesson11Application and Go to localhost:8888 and see the following output.
In this way, we learn How to create a Tab Panel using Bootstrap in Spring Boot Application.
