35- Add CSS Bootstrap library to Thymeleaf Template
There are two ways to add Bootstrap CSS in thymeleaf template-
1- Copy Paste the Bootstrap CDN link inside of head tag of thymeleaf template (html file with thymeleaf link)
NOTE:
CDN --> Content Delivery Network
A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.
2- Create a new CSS file and Copy paste the content inside of CDN link and then connect your CSS file with thymeleaf template
I have used method 1 in my project
thymeleaf-springboot-tutorial --> src/main/resources --> templates --> add-bootstrap.html
<!DOCTYPE html>
<html xmlns:th="//www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Bootstrap HTML Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Employee First Name </th>
<th scope="col"> Employee Last Name</th>
<th scope="col">Employee Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zeeshan</td>
<td>Khan</td>
<td>zeek@gmail.com</td>
</tr>
<tr>
<td>Ross</td>
<td>Geller</td>
<td>dinosaur@gmail.com</td>
</tr>
<tr>
<td>Monica</td>
<td>Geller</td>
<td>chef@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
thymeleaf-springboot-tutorial --> src/main/java --> net.javaguides.springboot --> HelloWorldContoller.java
package net.javaguides.springboot;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloWorldController {
@GetMapping("/hello")
public String hello(Model model){
model.addAttribute("message"," Hello World ");
return "helloworld";
}
@GetMapping("/css")
public String addCSS(){
return "add-css-js-demo";
}
@GetMapping("/strapboot")
public String addStrapboot(){
return "add-bootstrap";
}
}
Comments
Post a Comment