Why is my modal not displaying as a popup that fades from the top and centred?

Question

I am attempting to make a portfolio image gallery that display's a model with a click that fades in and is positioned to the center.

The Button Does not properly load the modal popup.

I have tried proper linking from bootstrap and jquery files, I have also attempted to check if CSS properties are conflicting, and still, nothing works?

I don't understand if it's where I placed the modal fade or if it has to do with mixing a modal popup with a category filter menu.

I have attempted to search online everywhere but cannot seem to find any other issues with this.

Thank you for your help.

    $(document).ready(function () {
        $('.list').click(function () {
            const value =
                $(this).attr('data-filter'); if (value == 'all') { $('itemBox').show('1000'); }
            else {
                $('.itemBox').not('.' + value).hide('1000');
                $('.itemBox').filter('.' + value).show('1000');
            }
        }) $('.list').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
    })

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'poppins', sans-serif;
    }

    section {
        padding: 20px;
        width: 1280px;
        margin: 40px auto;
    }

    section ul {
        display: flex;
        margin-bottom: 10px;
        ;
    }

    section ul li {
        list-style: none;
        background: #eee;
        padding: 8px 20px;
        margin: 5px;
        letter-spacing: 1px;
        cursor: pointer;
    }

    section ul li.active {
        background: #03a9f4;
        color: #fff;
    }

    .product {
        display: flex;
        flex-wrap: wrap;
    }

    .product .itemBox {
        position: relative;
        width: 200px;
        height: 300px;
        margin: 5px;
    }

    .product .itemBox img {}

    #position {}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
    <ul>
        <li class="list active" data-filter="all">All</li>
        <li class="list" data-filter="mobile">Mobile</li>
        <li class="list" data-filter="camera">Camera</li>
        <li class="list" data-filter="watch">Watch</li>
        <li class="list" data-filter="shoe">Shoe</li>
        <li class="list" data-filter="headphone">Headphone</li>
    </ul>

    <div class="product">

        <div class="card">


            <div class="card-body">
                <div class="itemBox mobile"><img src="img/colorgame.jpg" />
                    <h5 class="card-title">Card Title</h5>
                    <p class="card-text">Quick TExt Example</p>

                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Launch demo modal
                    </button>


                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" 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">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <img src="img/colorgame.jpg" />
                                    <p>Example Paragraph text</p>

                                </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>




        </div>
        <div class="itemBox camera"><img src="img/colorgame.jpg"></div>
        <div class="itemBox watch"><img src="img/colorgame.jpg"></div>
        <div class="itemBox shoe"><img src="img/colorgame.jpg"></div>
        <div class="itemBox headphone"><img src="img/colorgame.jpg"></div>
    </div>
</section>