jquery bootgrid fails to style and buttons fail to work - jquery-bootgrid

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.

Related

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>

<mvc:resources mapping="/resources/**" location="/resources/" />

This is the dispatcher-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
<mvc:annotation-driven />
<context:component-scan base-package="com.web.controllers" />
<mvc:resources mapping="/resources/**" location="/resources/" />
<!-- <mvc:default-servlet-handler /> -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
</beans:beans>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<title>mypage</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="${pageContext.request.contextPath}/WebContent/resources/mycustom/fabrication.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/mycustom/boxmodel.css" rel="stylesheet">
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/moslake_style.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/boxmodel.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/font.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/WebContent/resources/css/media.css" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.min.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
</head>
<body bgcolor="#F5FAFA">
<h1>${pageContext.request.contextPath}</h1>
<div class="header">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-5"></div><!--end of first row columns-->
<div class="col-md-2">
<a class="navbar-brand" href="#"><img src="img/swing.png" alt="swing logo" height="50" width="100"></a>
</div>
<div class="col-md-5"></div>
</div><!--end of row-->
<div class="row">
<div class="col-md-5">
<ul class="nav nav-pills">
<li>
<button class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown" type="button">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="dropdown-menu">
<li><p align="center">Projects List</p></li>
<li class="divider"></li>
<li><b>Project1</b></li>
<li><b>Project2</b></li>
<li><b>Project3</b></li>
<li><b>Project4</b></li>
<li><b>Project5</b></li>
</ul>
</li>
<li class="dropdown">
<button type="button" class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">
<span class="glyphicon glyphicon-plus"></span>
</button>
<ul class="dropdown-menu">
<li><p align="center">Add</p></li>
<li class="divider"></li>
<li><b>New Project</b></li>
</ul>
</li>
<li>
<form class="navbar-search" id="srch" action="#">
<input type="text" class="form-control" placeholder="Search">
</li>
<li>
<button class="btn btn-primary btn-md" type="submit"><span class="glyphicon glyphicon-search"></span>Search</button>
</form>
</li>
</ul>
</div><!--end of col-md-5-->
<div class="col-md-4"></div><!--end of col-md-4-->
<div class="col-md-3">
<ul class="nav nav-pills">
<li>
<a class="btn btn-basic">hello!
<span class="badge">Abbas Kapasi</span>
</a>
</li>
<li class="dropdown">
<button class="dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></button>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!--end of col-md-3-->
</div><!--end of nested row-->
</div><!--end of main container-->
</div><!--end of nav-->
</div><!--end of header-->
</body>
</html>
This causes following error:
org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Cannot locate BeanDefinitionParser for element [resources]
Offending resource: ServletContext resource [/WEB-INF/containers/dispatcher-servlet.xml]

Can I use spring thymeleaf with layoutdialect?

Like in topic, Can I use Thymeleaf layout dialect with spring?
Do I have to use Spring Standard Dialect?
There is so many materials on web, which makes me really confused.
I've started with Layout dialect, but I cant get to work whole app.
Here is my template main file:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>DERP></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../css/template.css" th:href="#{/css/template.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/font-awesome-4.2.0/css/font-awesome.min.css" th:href="#{/lib/font-awesome-4.2.0/css/font-awesome.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css" th:href="#{/lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/animate/animate.css" th:href="#{/lib/animate/animate.css}" />
</head>
<body>
<div th:include="fragments/bodyHeader" th:remove="tag">
for prototyping
</div>
<div id="mainMenu">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DERP</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-home"></i> Customer <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user"></i> User <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- #mainMenu ENDS-->
<div layout:fragment="header">Static header</div>
<div layout:fragment="pageContent">Demo static page content</div>
<div id="pageFooter" class="panel panel-default">
<div class="panel-body">Copyright Daniel Korbel 2014</div>
</div>
<div id="javaScriptSection">
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.1.min.js" th:src="#{lib/jquery/jquery-2.1.1.min.js}"></script>
<script type="text/javascript" src="../../js/template.js" th:src="#{/js/template.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js" th:src="#{/lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/layouts/topRight.js" th:src="#{/lib/noty-2.3.1/js/noty/layouts/topRight.js}"></script>
<script type="text/javascript" src="../../js/notyStarter.js" th:src="#{/js/notyStarter.js}"></script>
<script type="text/javascript" src="../../lib/bootstrap-3.3.1-dist/js/bootstrap.min.js" th:src="#{/lib/bootstrap-3.3.1-dist/js/bootstrap.min.js}"></script>
</div>
</body>
</html>
and my sample body file which is returned by controller:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
But unfortunatelly this code works only with Layout dialect.
Can anyone help me transform that code to work with spring standard dialect?
My thymeleaf config:
public class ThymeleafConfig {
#Bean
public ServletContextTemplateResolver templateResolver() {
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setPrefix("/WEB-INF/view/");
resolver.setSuffix(".html");
resolver.setTemplateMode("HTML5");
resolver.setOrder(1);
resolver.setCacheable(false);
return resolver;
}
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver());
templateEngine.setDialect(new SpringStandardDialect());
//templateEngine.setDialect(new LayoutDialect());
return templateEngine;
}
#Bean
public ThymeleafViewResolver viewResolver() {
ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine());
viewResolver.setCharacterEncoding("UTF-8");
return viewResolver;
}
}

Adding the layoutdialect to the templateengine should be enough to get it working. Don't use setDialect. You should have an addDialect or setAdditionalDialects method or something like that. (I use the xml config so i don't know the exact names)
UPDATE: added xml config
<beans:bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<beans:property name="templateResolvers">
<beans:set>
<beans:ref bean="servletContextTemplateResolver" />
<beans:ref bean="classLoaderTemplateResolver" />
</beans:set>
</beans:property>
<beans:property name="dialects">
<beans:set>
<beans:ref bean="thymeleafSpringDialect" />
</beans:set>
</beans:property>
<beans:property name="additionalDialects">
<beans:set>
<beans:bean class="nz.net.ultraq.thymeleaf.LayoutDialect" />
<beans:bean
class="org.thymeleaf.extras.springsecurity3.dialect.SpringSecurityDialect" />
<beans:bean class="ch.mfrey.thymeleaf.extras.with.WithDialect" />
<beans:bean class="ch.mfrey.thymeleaf.extras.cache.CacheDialect" />
</beans:set>
</beans:property>
</beans:bean>

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>

How to make 2 tables on 1 page?

I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?

You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...

Resources