Thymeleaf sec:authorize is not working on spring application - spring

I making the header of my website for an assignment and I wanted to be able to disply different things depending if they are logged in or not. Problem is sec:authorize is not working with no errors or warnings to indicate why.
Here is my header file where I am trying to dispaly login & register if they are not logged in and logout if they are. But all of them appear no matter what.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header class="masthead mb-auto" th:fragment="header">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<div class="inner">
<div class="Lucida_Handwriting">
<a class="Lg" href=".." >
<h3 class="logo-brand" id="Logo">Divorce app</h3>
</a>
</div>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="/" th:href="#{/}">Home</a>
<a sec:authorize="!isAuthenticated()" class="nav-link" href="/login" th:href="#{/login}">Login</a>
<a sec:authorize="isAuthenticated()" class="nav-link fw-bold py-1 px-0" href="/logout" th:href="#{/logout}">Logout</a>
<a sec:authorize="!isAuthenticated()" class="nav-link fw-bold py-1 px-0" href="/register" th:href="#{/register}">Register</a>
<a class="nav-link" href="/contact">Contact</a>
</nav>
</div>
</div>
</header>
</body>
</html>
Here are my dependecies among others. Version of spring-boot-starter-security & spring-boot-starter-thymeleaf is 3.0.1
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity5</artifactId>
<version>3.1.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Also noticed that it gets passed in the html altho I think it should not do that
<a sec:authorize="!isAuthenticated()" class="nav-link" href="/login">Login</a>
<a sec:authorize="isAuthenticated()" class="nav-link fw-bold py-1 px-0" href="/logout">Logout</a>
<a sec:authorize="!isAuthenticated()" class="nav-link fw-bold py-1 px-0" href="/register">Register</a>
Tried using thymeleaf-extras-springsecurity4 but it didnt work.
Tried using older versions of thymeleaf-extras-springsecurity5 but that didnt work either.
Tried replacing xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5" with xmlns:sec="http://www.thymeleaf.org/extras/spring-security" but it didnt work.
EDIT: Added the html code instead of an image

Related

jquery bootgrid fails to style and buttons fail to work

I'm trying to use the jquery-bootgrid plugin, but running into some issues using a simple initialization.
The button pagination isn't styled properly and the pageSize/column selection button throws an error in the console when you click on the button:
a.default is not a constructor
This is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li>
</ul>
</nav>
<div id="content-container" class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1>
<!-- jquery-bootgrid starts here -->
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="email">Sender</th>
<th data-column-id="firstName">First Name</th>
<th data-column-id="lastName" data-order="desc">Last Name</th>
<th data-column-id="deactivated">Deactivated</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user#domain.com</td>
<td>John</td>
<td>Smith</td>
<td>true</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script>
$(document).ready(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
I don't feel like I'm doing anything overly complicated here and I'm following the example in the documentation.
This leads me to believe it is a version conflict with bootstrap 4.5.

Why am i getting two MY ACCOUNT on my nav bar using sec:authorize ="isAnonymous()"

<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="isAnonymous()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:fragment="common-header">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Le's Bookstore</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/non-responsive.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />
<link rel="icon" href="/image/applie-touch-icon.png" />
</head>
<body>
<div th:fragment="navbar">
<div class="page-top"
style="width: 100%; height: 20px; background-color: #f46b42;"></div>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">LE'S BOOKSTORE</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">BOOKS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Browse the bookshelf</li>
<li>Store hours & Directions</li>
<li>FAQ</li>
</ul></li>
<form class="navbar-form">
<div class="form-group">
<input type="text" name="keyword" class="form-control"
placeholder="Book title" />
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="isAnonymous()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<div th:fragment="body-bottom-scripts">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Your namespace is not correct. You may need to add thymeleaf & springsecurity5 as shown below:
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<!-- head, body, etc -->
</html>

Try to use !isAuthenticated(). Edit your code like this:
<ul class="nav navbar-nav navbar-right">
<li>SHOPPING CART</li>
<li><a sec:authorize="!isAuthenticated()" th:href="#{/login}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/myProfile}">MY ACCOUNT</a></li>
<li><a sec:authorize="isAuthenticated()" th:href="#{/logout}">LOGOUT</a></li>
</ul>

No message available JSP SpringBoot

I've been looking through almost every post that is related to my problem and tried every solution that i've found and this problem keeps appearing.
I'm developing a web application and i have almost all the pages that will include, but when i try to connect the Controllers with any JSP this messages appears every time, so i created a new project with only one table and a couple pages, and still get the same "error" but only with pages that load some information, i've tried with one very simple page and it works
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
There was an unexpected error (type=Not Found, status=404).
No message available
Pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>mjsl.gineco</groupId>
<artifactId>GinecObstWeb</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>GinecObstWeb</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.core</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.asm</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.antlr</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.jpa</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.jpa.jpql</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>javax.persistence</artifactId>
<version>2.1.0</version>
</dependency>
<dependency>
<groupId>org.eclipse.persistence</groupId>
<artifactId>org.eclipse.persistence.jpa.modelgen.processor</artifactId>
<version>2.5.2</version>
<scope>provided</scope>
</dependency>
<!-- standard.jar -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!-- JSTL -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
application.properties
spring.datasource.url=jdbc:mysql://localhost:13366/ginecoweb?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=gineco
spring.datasource.password=Gineco-94.Aguila
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=none
spring.jpa.database-platform=org.hibernate.dialect.MySQLDialect
spring.jpa.generate-ddl=false
spring.jpa.properties.hibernate.hbm2ddl.auto=none
spring.mvc.view.prefix: /WEB-INF/views/
spring.mvc.view.suffix: .jsp
Entity
Clientes.java
package mjsl.gineco.entity;
import java.io.Serializable;
import java.util.Date;
import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Lob;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import javax.xml.bind.annotation.XmlRootElement;
import lombok.Data;
#Data
#Entity
#Table(name = "clientes")
public class Clientes implements Serializable {
private static final long serialVersionUID = 1L;
#Id
#Basic(optional = false)
#NotNull
#Column(name = "CLAVCLI")
private Integer clavCli;
#Size(max = 100)
#Column(name = "NOMBCLI")
private String nombCli;
#Size(max = 100)
#Column(name = "DIRECLI")
private String direCli;
#Size(max = 50)
#Column(name = "COLOCLI")
private String coloCli;
#Size(max = 50)
#Column(name = "POBLCLI")
private String poblCli;
#Size(max = 30)
#Column(name = "TELCLI")
private String telCli;
// #Max(value=?) #Min(value=?)//if you know range of your decimal fields consider using these annotations to enforce field validation
#Column(name = "ESTACLI")
private Double estaCli;
#Size(max = 100)
#Column(name = "OCUPCLI")
private String ocupCli;
#Size(max = 100)
#Column(name = "NOCOCLI")
private String nocoCli;
#Size(max = 100)
#Column(name = "OCCOCLI")
private String occoCli;
#Lob
#Column(name = "EXPECLI")
private byte[] expeCli;
#Column(name = "FECHANACCli")
#Temporal(TemporalType.DATE)
private Date fechanacCli;
#Size(max = 5)
#Column(name = "GYRH")
private String gyrhCli;
#Column(name = "EMBARAZO")
private Boolean embarazoCli;
#Size(max = 50)
#Column(name = "SEGUROCli")
private String seguroCli;
#Column(name = "NOSI")
private Boolean nosiCli;
#Size(max = 500)
#Column(name = "FOTO")
private String fotoCli;
// #Pattern(regexp="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", message="Invalid email")//if the field contains email address consider using this annotation to enforce field validation
#Size(max = 200)
#Column(name = "EMAIL")
private String emailCli;
}
ClientesController
package mjsl.gineco.controller;
import java.util.List;
import mjsl.gineco.entity.Clientes;
import mjsl.gineco.service.ClientesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class ClientesController {
#Autowired
ClientesService ctesService;
#RequestMapping("")
public String inicio() {
return "inicio";
}
#RequestMapping("listcte")
public String listaCtes(Model model) {
List<Clientes> clientes = ctesService.getAllCtes();
model.addAttribute("clientList", clientes);
return "indexpac";
}
#RequestMapping("newcte")
public String nuevoCte(Model model) {
Clientes clientes = new Clientes();
model.addAttribute("clienteNuevo", clientes);
return "nuevopac";
}
}
ClientesRepository
package mjsl.gineco.repository;
import mjsl.gineco.entity.Clientes;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ClientesRepository extends JpaRepository<Clientes, Integer> {
}
ClientesService
package mjsl.gineco.service;
import java.util.List;
import java.util.Optional;
import mjsl.gineco.entity.Clientes;
public interface ClientesService {
void saveCte(Clientes clientes);
List<Clientes> getAllCtes();
Optional<Clientes> getCte(Integer clavCli);
void deleteCte(Integer clavCli);
}
ClientesServiceImpl
package mjsl.gineco.service;
import java.util.List;
import java.util.Optional;
import mjsl.gineco.entity.Clientes;
import mjsl.gineco.repository.ClientesRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
#Service
public class ClientesServiceImpl implements ClientesService {
#Autowired
ClientesRepository ctesRepo;
#Override
public void saveCte(Clientes clientes) {
ctesRepo.save(clientes);
}
#Override
public List<Clientes> getAllCtes() {
return ctesRepo.findAll();
}
#Override
public Optional<Clientes> getCte(Integer clavCli) {
return ctesRepo.findById(clavCli);
}
#Override
public void deleteCte(Integer clavCli) {
ctesRepo.deleteById(clavCli);
}
}
indexpac.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GinecoObstetricia Avanzada - Pacientes</title>
</head>
<body>
<p><%# include file="/WEB-INF/views/jspf/menu.jspf"%></p>
<p></p>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<h4 class="text-center">Listado de Pacientes</h4>
<hr>
<i class="glyphicon glyphicon-edit"></i> Nuevo(a) Paciente
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Buscar">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Ir</button>
</div>
</div>
<p/>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Teléfono</th>
<th>Ver</th>
<th>Expediente</th>
<!-- <th>Eliminar</th>-->
</tr>
</thead>
<tbody>
<c:forEach var="clients"
items="${clientList}">
<c:url var="updateCteLink" value="/clientes/editapac">
<c:param name="clavCli" value="${clients.clavCli}"/>
</c:url>
<c:url var="openCteLink" value="/clientes/datospac">
<c:param name="clavCli" value="${clients.clavCli}"/>
</c:url>
<tr>
<td>${clients.clavCli}</td>
<td>${clients.nombCli}</td>
<td>${clients.telCli}</td>
<td>
<a href="${updateCteLink}">
<span class="fa-stack">
<i class="far fa-edit" style="color:blue"> </i>
</span>
</a>
</td>
<td><a href="${openCteLink}">
<span class="fa-stack">
<i class="far fa-folder-open"> </i>
</span>
</a>
</td>
<!-- <td>><a href="${pageContext.request.contextPath}/product/delete/${clients.clavCli}">
<span class="fa-stack">
<i class="far fa-trash-alt"> </i>
</span>
</a>
</td>-->
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
menu.jspf
<%# page pageEncoding="UTF-8" %>
<%!
public String getPath(){
String path = getServletContext().getContextPath();
return path;
}
%>
<nav class="navbar navbar-default navbar-fixed-top navbar-expand-md bg-light navbar-light">
<div class="container-fluid">
<!-- -->
<div class="navbar-header">
<a class="navbar-brand" href="#">GinecoObstetricia</a>
</div>
<!-- -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<%=getPath()%>/index.jsp">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<%=getPath()%>/login.jsp">Iniciar Sesión</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pacientes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<!-- <a class="dropdown-item" href="<%response.sendRedirect("indexpac");%>">Inicio</a>-->
<a class="dropdown-item" href="<%=getPath()%>/indexpac.jsp">Inicio</a>
<a class="dropdown-item" href="<%=getPath()%>/nuevopac.jsp">Agregar</a>
<a class="dropdown-item" href="<%=getPath()%>/datospac.jsp">Expediente Médico</a>
<a class="dropdown-item" href="<%=getPath()%>/datoscons.jsp">Consulta</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Estudios
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="<%=getPath()%>/listadoest.jsp">Listado</a>
<a class="dropdown-item" href="<%=getPath()%>/nuevoest.jsp">Nuevo</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Agenda
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="<%=getPath()%>/index.jsp">Listado</a>
<a class="dropdown-item" href="<%=getPath()%>/index.jsp">Nueva</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
nuevopac.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="mvc" %>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GinecoObstetricia Avanzada - Pacientes</title>
</head>
<body>
<p><%# include file="/WEB-INF/views/jspf/menu.jspf"%></p>
<p></p>
<div class="col-md-10 order-md-1">
<mvc:form modelAttribute="clienteNuevo" action="createCte">
<mvc:hidden path="clavCli" />
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Nombre</span>
</div>
<mvc:input path="nombCli" type="text" class="form-control"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Fecha de Nacimiento</span>
</div>
<mvc:input path="fechanacCli" type="date" class="form-control btn btn-outline-secondary col-md-3"/>
<div class="input-group-prepend">
<span class="input-group-text">Ocupación</span>
</div>
<mvc:input path="ocupCli" type="text" class="form-control col-md-3"/>
<div class="input-group-prepend">
<span class="input-group-text">GyRH</span>
</div>
<mvc:input path="gyrhCli" type="text" aria-labelledby="GyRH-ariaLabel" class="form-control col-md-3"/>
<div class="input-group-prepend">
<span class="input-group-text">Estatura</span>
</div>
<mvc:input path="estaCli" type="text" class="form-control col-md-3"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Domicilio</span>
</div>
<mvc:input path="direCli" type="text" class="form-control" placeholder="Calle y Número"/>
<mvc:input path="coloCli" type="text" class="form-control" placeholder="Colonia o Fraccionamiento"/>
<mvc:input path="poblCli" type="text" class="form-control" placeholder="Población"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Teléfono</span>
</div>
<mvc:input path="telCli" type="text" class="form-control col-md-6"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Conyuge</span>
</div>
<mvc:input path="nocoCli" type="text" placeholder="Nombre" class="form-control col-md-3"/>
<mvc:input path="occoCli" type="text" placeholder="Ocupación" class="form-control col-md-3"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Compañía de Seguros</span>
</div>
<mvc:input path="seguroCli" type="text" placeholder="Nombre de la Compañía de Seguros" class="form-control col-md-6"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">E-mail</span>
</div>
<mvc:input path="emailCli" type="text" placeholder="Correo Electrónico" class="form-control col-md-6"/>
</div>
<div class="form-check-inline mb-3">
<label class="form-check-label">
<mvc:checkbox path="nosiCli" class="form-check-input" value=""/>Recomendada
</label>
</div>
<div class="input-group mb-3">
<input type="submit" value="Guardar" class="btn btn-success">
<button type="button" class="btn btn-danger">Cancelar</button>
</div>
</mvc:form>
</div>
<!--<p style="text-align: center"><img src="Resources/logo_mrysi.png" align="bottom"/></p>-->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Project Map

Based on your Controller mapping when you hit
localhost:8080/ => inicio page will load
localhost:8080/listcte => indexpac page will load
localhost:8080/newcte => nuevopac page will load
Now let's see what you were trying
localhost:8080/listado => will throw error page as no mapping is found for this URL in Controller class.
localhost:8080/newcte => should load nuevopac page. Check console for error and please add nuevopac code. May be JSP throwing some error.

Replace in your Controller Client class #Controller for #RestController

Error occuring template parsing. (Spring Boot + Thymeleaf) with layout and static

I am getting parsing error when I try to load localhost:8080/.
I can't find any errors in my template, so why have I this mistake?
The file static has folder css and picture with jQuery, js and bootstrap
Error : This application has no explicit mapping for /error, so you are seeing this as a fallback.
Wed May 22 13:02:18 CEST 2019
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/RHAjouterDeve.html]")
Code layout index.html:
<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link th:href="/webjars/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<link rel="icon" th:href="(images/favicon.ico)" type="image/ico" />
<title>Projet Pfa Spring BOOT </title>
<link rel="stylesheet" th:href="{build/css/bootstrap.min.css}" />
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
</div>
<div class="clearfix"></div>
<div class="profile clearfix">
<div class="profile_pic">
</div>
</div>
<br />
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>Menu</h3>
<!-- <ul class="nav side-menu"> -->
<!-- <li><a><i class="fa fa-home"></i> Formation <span class="fa fa-chevron-down"></span></a> -->
<!-- <ul class="nav child_menu"> -->
<!-- <li>Demande Formation</li> -->
<!-- <li>Formation Traité</li> -->
<!-- <li>Formation Accepter</li> -->
<!-- <li>Formation En Cours</li> -->
<!-- <li>Formation Finis</li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <ul class="nav side-menu"> -->
<!-- <li><a><i class="fa fa-home"></i> Devellopeur <span class="fa fa-chevron-down"></span></a> -->
<!-- <ul class="nav child_menu"> -->
<!-- <li>La Liste Devellopeur</li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- </ul>-->
</div>
</div>
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img th:src="(images/img.jpg)" alt="">
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li>
</li>
<li><i class="fa fa-sign-out pull-right"></i> Log Out</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img th:src="(images/img.jpg)" alt="Profile Image" /></span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
</a>
</li>
<li>
<a>
</a>
</li>
<li>
<a>
</a>
</li>
<li>
<div class="text-center">
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<!-- <div class="row tile_count"> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Formation en cours</span> -->
<!-- <div class="count">2500</div> -->
<!-- </div> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Formation Traité </span> -->
<!-- <div class="count">123.50</div> -->
<!-- <span class="count_bottom"><i class="green"> </i></span> -->
<!-- </div> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Total Finis</span> -->
<!-- <div class="count green">2,500</div> -->
<!-- <span class="count_bottom"><i class="green"></i> </i></span> -->
<!-- </div> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Total Formateur</span> -->
<!-- <div class="count">4,567</div> -->
<!-- <span class="count_bottom"><i class="red"></i> </i> </span> -->
<!-- </div> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Total Employé</span> -->
<!-- <div class="count">2,315</div> -->
<!-- <span class="count_bottom"><i class="green"> </span> -->
<!-- </div> -->
<!-- <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> -->
<!-- <span class="count_top"><i class="fa fa-user"></i> Total Chef Projet</span> -->
<!-- <div class="count">7,325</div> -->
<!-- <span class="count_bottom"><i class="green"> </span> -->
<!-- </div> -->
<!-- </div> -->
<section layout:fragment="content" class="container">
</section>
<!-- start of weather widget -->
<!-- end of weather widget -->
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<!-- /footer content -->
<!-- Custom Theme Scripts -->
<script src="build/js/custom.min.js"></script>
<script src="/webjars/jquery/3.4.1/jquery.js"></script> <script src="/webjars/bootstrap/4.3.1/js/bootstrap.js">
</script>
</body>
</html>
</strike>
Fichier rhajouterdeve.html
<strike><!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<body>
<section layout:fragment="content">
hello
</section>
</body>
</html>
</strike>
le code du controller :
package com.projetpfa.gestionrh.gestionrh.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
#RequestMapping("/Devellopeur")
public class DeveControllers {
//#Autowired
//DeveService dvserv;
#GetMapping("/")
public String AllDeve( )
{
return"RHAjouterDeve";
}
}
mon fichier pom.xml :
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.projet.pfa</groupId>
<artifactId>projetpfa</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>projetpfa</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-entitymanager</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.hibernate.javax.persistence</groupId>
<artifactId>hibernate-jpa-2.1-api</artifactId>
<version>1.0.0.Final</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.3.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Error in logs:
____org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/RHAjouterDeve.html]")
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:241) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parseStandalone(AbstractMarkupTemplateParser.java:100) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:666) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362) [thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.spring5.view.ThymeleafView.render(ThymeleafView.java:189) [thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1370) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1116) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1055) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at javax.servlet.http.HttpServlet.service(HttpServlet.java:634) [tomcat-embed-core-9.0.17.jar:9.0.17]
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882) [spring-webmvc-5.1.6.RELEASE.jar:5.1.6.RELEASE]
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) [tomcat-embed-core-9.0.17.jar:9.0.17]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) [tomcat-embed-core-9.0.17.jar:9.0.17]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-9.0.17.jar:9.0.17] _ __ _ _
have a Spring Boot for serving images. My Model is included in my ImageController.java. ImageService contains findPage method.
When running my Spring Boot Application I am getting an error.
I want to see me template DASHBOARD to begin my project
How can localhost:8585/Devellopeur find template with static file and layout view with no error,

First of all, you can not access localhost:8080/ because you do not have the right controller. You can access http://localhost:8090/Devellopeur/
package com.projetpfa.gestionrh.gestionrh.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
#RequestMapping("/Devellopeur")
public class DeveControllers {
//#Autowired
//DeveService dvserv;
#GetMapping("/")
public String AllDeve( )
{
return"RHAjouterDeve";
}
}
In order to access http://localhost:8090/Devellopeur/ without no thymeleaf parsing errors, you have to create the web page default declared in your rhajouterdeve.html. In general, this file (default.html) is used to to reuse header and footer on all Thymeleaf templates.
<html xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
Create it in templates package and declare it as follow:
<html xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
At last, you should delete the <strike> in your rhajouterdeve.html
Here an example of default page that you can use.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Jeutroll</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a th:href="#{/index}">Home</a></li>
</ul>
</div>
</nav>
</div>
</header>
<section layout:fragment="content"></section>
<footer>
<div class="navabar-fixed-bottom">
<small>adress</small>
</div>
</footer>
</body>
</html>

Popups with full image from thumbnails

I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/

Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>

Resources