[RESOLVIDO] Como configurar corretamente o Thymeleaf Dialect?

Programação Java
#1

Para aprender um pouco mais sobre o Spring Boot criei um pequeno projeto. A persistência de dados funciona, mas estou com problemas com o Dialect do Thymeleaf. Sei configurar no Maven, mas não estou conseguindo fazer dar certo no Gradle. Alguém pode me ajudar? Desde já, muito obrigada!

As dependências do Gradle:

buildscript {
	ext {
		springBootVersion = '2.0.5.RELEASE'
	}
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
	}
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'com.libraryfriendsapp'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
	mavenCentral()
}

dependencies { //Tentei configura com a informações do Maven Central.
	implementation('org.springframework.boot:spring-boot-starter-data-jpa')
	implementation('org.springframework.boot:spring-boot-starter-thymeleaf:3.0.9.REALEASE')
	implementation('org.springframework.boot:spring-boot-starter-web')
	runtimeOnly('org.springframework.boot:spring-boot-devtools')
	runtimeOnly('mysql:mysql-connector-java')
	implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
	testImplementation('org.springframework.boot:spring-boot-starter-test')
}

O código que fiz para o layout.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link href="../static/css/custom.css" rel="stylesheet" >
		<title>The Library Friends</title>
	</head>
	
	<body>
		<div class="container-fluid">
			<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
				<a class="navbar-brand" th:href="@{/}">
					<img th:src="@{/img/TheLibraryFriends.png}" src="../static/img/TheLibraryFriends.png"/>
				</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarText">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" th:href="@{/}">Home<span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" th:href="@{/sobrenos}">Sobre Nós</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" th:href="@{/regras}">Regras</a>
					</li>
				</ul>
				<span class="navbar-text">
					Somos amigos que leêm!
				</span>
				</div>
			</nav>
			
			<div class="container">
				<h1 layout:fragment="header">Cabeçalho falso</h1>
				<div layout:fragment="content">Content falso</div>
			</div>
		
		</div>
		<!-- Bootsrap JavaScript -->
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	</body>
</html>

Visualmente está assim:

inserir a descrição da imagem aqui

A página index.html que deveria implementar o layout.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	</head>
	
	<body>
		<h1 layout:fragment="header"> Library Friends!
			<small>Como vai funcionar?</small>
		</h1>
		
	</body>


</html>

Era para ser parecida com layout.html, mas está saindo assim:

inserir a descrição da imagem aqui

Minha estrutura de pasta para esse projeto:

inserir a descrição da imagem aqui