I try to make a modal table that comes out when a button is clicked. I made a code with the Bootstrap official site's help on Modal thinking it would go, but, although the button is present, there is no table that comes out. Do you have an idea?
The code of the page is about Bitbucket in index.html but here is the code if you need it. I pointed to the line where the modal code starts with a comment Example Modal Button :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap-social.css">
<!--#meta charset="utf-8">
<!--#meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--#meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!--#link href="css/bootstrap.min.css" rel="stylesheet">
<!--#link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!--#link href="css/mystyles.css" rel="stylesheet">
<!--#link href="css/font-awesome.min.css" rel="stylesheet">
<!--#link href="css/bootstrap-social.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" role = "navigation">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav nav">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="./contactus.html"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#loginModal"><span class="fa fa-sign-in"></span> Login</a></li>
</ul>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Sign in</button>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-12">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our
lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col col-sm align-self-center">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-fluid">
</div>
<div class="col-12 col-sm align-self-center">
<p style="padding:40px;"></p>
<a type="button" class="btn btn-warning btn-sm btn-block"
data-placement="bottom" data-toggle="modal" data-target="#exampleModal">Reserve table</a>
</div>
<!--Example Modal Button-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/uthappizza.png" alt="Uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
<p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
<div class="carousel-item">
<img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
<div class="carousel-caption d-none d-md-block">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
person </p>
<p><a class="btn btn-primary btn-xs"href="#">More »</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">Alberto Somayya</h2>
<p class="hidden-xs-down">Award winning three-star Michelin chef with wide
International experience having worked closely with
whos-who in the culinary world, he specializes in
creating mouthwatering Indo-Italian fusion experiences.
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-sm-4 col-md-3 flex-last">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-sm col-md flex-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center"
src="img/uthappizza.png" alt="Uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
<p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="row row-content">
<div class="col">
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div class="media">
<div class = "media-body">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
person </p>
<p><a class="btn btn-primary btn-xs"href="#">More »</a></p>
</div>
<div class="media-right media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row row-content align-items center">
<div class="col-sm-4 col-md-3 flex-last">
<p style="padding:20px;"></p>
<h3 align=center>Meet our Culinary Specialists</h3>
</div>
<div class="col-sm col-md flex-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="hidden-xs-down">Award winning three-star Michelin chef with wide
International experience having worked closely with
whos-who in the culinary world, he specializes in
creating mouthwatering Indo-Italian fusion experiences.
</p>
</div>
</div>
</div>
</div>
<div class="row row-content" id="form">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">Reserve a Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Number of Guests</label>
<div class="radio col-sm-10">
<label class="radio-inline"><input name="guests" type="radio" value=""> 1 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 2 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 3 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 4 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 5 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 6 </label>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-3 has-feedback">
<input type="text" class="form-control" id="date" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
<div class="col-sm-3 col-sm-push-1 has-feedback">
<input type="text" class="form-control" id="time" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
<div class="form-group col-sm-10 col-sm-push-2">
<a class="btn btn-primary" type="submit" href="#">Reserve</a>
</div>
<div class="col-sm-12 alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><strong>Warning:</strong> Please <a href="tel:85212345678" class="alert-link">call</a> us to reserve for more than six guests</p>
</div>
</form>
</div>
</div>
</div>
<div class="row row-content" id="form">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">Key Figures</h3>
</div>
<div class="col-xs-12 col-sm-9">
<div class="table-responsive">
<table class="table">
<thead class="bg-warning">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- # script src="js/bootstrap.min.js"></script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
</body>
</html>