Modal is not opening. Bootstrap

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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>