Not able to load css in spring boot resource template

Question

In the springboot project under the resource folder i have templates placed.

All other html pages have been able to load css and product.html is not loading.

am using thymeleaf fragment to intergrate.

Github url--:https://github.com/javayp/springbootmvc

ProductController.java

package com.sm.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import com.sm.services.ProductService;

@Controller
public class ProductController {

    private ProductService productService;

    @Autowired
    public void setProductService(ProductService productService) {
        this.productService = productService;
    }

    @RequestMapping("/products")
    public String productList(Model model){
        model.addAttribute("products", productService.productList());
        return "productList";
    }

    @RequestMapping("/viewproduct/{id}")
    public String productList(@PathVariable("id") Integer id,Model model){
        System.out.println("Id is------------"+id);
        model.addAttribute("product", productService.getProductById(id));
        return "product";
    }

}

CommonHeader- header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>DevOps</title>

<!-- Bootstrap core CSS -->
<link type="text/css"
    th:href="@{webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
    rel="stylesheet" media="screen" />

<!--Custom Css  -->
<link type="text/css" th:href="@{/css/style.css}" rel="stylesheet"
    media="Screen" />
</head>

<div th:fragment="before-body-script">
    <script th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"></script>
</div>
</html>

products.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <div th:replace="common/navbar :: common-navbar"></div>

    <div class="container">
        <div th:if="${not #lists.isEmpty(products)}">
            <h2>Product List</h2>
            <table class="table table-striped">
                <tr>
                    <th>Id</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Image URL</th>
                    <th>Link</th>
                </tr>
                <tr th:each="product: ${products}">
                    <td th:text="${product.id}"></td>
                    <td th:text="${product.description}"></td>
                    <td th:text="${product.price}"></td>
                    <td th:text="${product.url}"></td>
                    <td><a th:href="${'viewproduct/'+product.id}">View</a></td>
                </tr>
            </table>
        </div>
    </div>

    <div th:replace="common/header :: before-body-scripts"></div>

</body>
</html>

product.html

<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm2 control-label">Product ID</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.id}">Product
                    ID</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Description</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.description}">Description</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Price</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.price}">Price</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Url</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.url}">url</p>
            </div>
        </div>
    </form>
</body>
</html>

Im facing same problem. Could you tell us how is your project structure? Do you have resource and static folders? — KpsLok
– KpsLok, Commented Feb 16, 2017 at 1:14

DimaSan · Accepted Answer · 2016-11-23 14:10:50Z

5

In your header.html, where you add Bootstrap CSS stylesheet, add a slash / before path to webjars:

<!-- Bootstrap core CSS -->
<link type="text/css"
      th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
      rel="stylesheet" media="screen"/>

answered Nov 23, 2016 at 14:10

DimaSan

12.8k15 gold badges71 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not able to load css in spring boot resource template

}

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

}

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related