Circular Image Display - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/base-layout}"> <head> <meta charset="UTF-8"> <title>Subscribed</title> </head> <body layout:fragment="content"> <div class="container my-5"> <!-- Check if the instructors list is empty --> <h2 th:if="${#lists.isEmpty(instructors)}" class="text-danger text-center mb-4"> Bạn chưa theo dõi giảng viên nào </h2> <h2 th:if="${!#lists.isEmpty(instructors)}" class="text-center mb-4">Giảng Viên Bạn Đang Theo Dõi</h2> <div class="row" th:if="${!#lists.isEmpty(instructors)}"> <!-- Thymeleaf loop to display subscribed instructors --> <th:block th:each="instructor : ${instructors}"> <div class="col-md-6 "> <div class=" instructor-card"> <div class="instructor-card-body"> <img th:src="@{${instructor.avatarUrl}}" class="avatar"> <div class="instructor-card-text flex"> <h5 th:text="${instructor.fullName}"></h5> <p th:text="${instructor.email}"></p> </div> <div class="instructor-card-body"> <form class="ms-auto"> <input type="hidden" name="instructorId" th:value="${instructor.id}"> <button type="submit" class="btn btn-danger w-100">Hủy Đăng Ký</button> </form> </div> </div> </div> </div> </th:block> </div> </div> </body> </html>
