Modal is not opening. Bootstrap - html

Question

I am new to HTML and am trying to create a button that opens a model. I cannot find out why it's not opening. Modal has to pop with the form in it. When I click nothing happens.
Please, help to uderstand where I did a mistake.
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
<h3 class="modal-title">Reserve a Campsite</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="form-group">
<div class="col-12 col-sm-10">
<label for="numCampers">Number of Campers</label>
<select class="form-control align-items-right" id="numCampers">
<option value="">Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<label for="DateChampers">Date</label>
<input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<button type="Search" class="btn btn-primary ">Search</button>
</div>
<div class="col col-12 col-sm-10 mb-4">
<button type="Cancel" class="btn btn-primary " data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 1

You forgot the Trigger button to launch the modal window
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveModal">
Launch demo modal
</button>
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
<h3 class="modal-title">Reserve a Campsite</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="form-group">
<div class="col-12 col-sm-10">
<label for="numCampers">Number of Campers</label>
<select class="form-control align-items-right" id="numCampers">
<option value="">Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<label for="DateChampers">Date</label>
<input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<button type="Search" class="btn btn-primary ">Search</button>
</div>
<div class="col col-12 col-sm-10 mb-4">
<button type="Cancel" class="btn btn-primary " data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>