Bootstrap button not appearing on webpage

Hi I am trying to insert some php in my webpage which has worked but for some reason the button code will not appear after my php code (for the drop down menu at the bottom of my form.

Any help would be fantastic.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Insert Scores</title>

    <link rel="stylesheet" href="css/styles.css" />

  </head>

  <body>

    <h1>Insert Round</h1>

    <div id="wrapper">

<form>

    <h3>Choose player<h3>

    <select class="form-select" aria-label="Default select example">

  <option selected>Select Player</option>

  <option value="1">kevin</option>

  <option value="2">al</option>

  <option value="8">lee</option>

    </select>

    

<div class="mb-3">

  <label for="date" class="form-label">Date</label>

  <input type="date" class="form-control" id="exampleFormControlInput1" placeholder="Insert Date Here">

</div>

<div class="mb-3">

  <label for="score" class="form-label">Score</label>

  <input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Insert Score Here">

</div>

<select class="form-select" aria-label="Default select example">

  <option selected>Position</option>

  <option value="1">1st</option>

  <option value="2">2nd</option>

  <option value="3">3rd</option>

    </select>

<br>

    <?php

        $resultSet = $con->query("SELECT courseName FROM courses");

        ?>

        <select class="form-select" aria-label="Default select example"name="courses">

        <option selected>Select Course</option>

        <?php

        while($rows = $resultSet->fetch_assoc()){

          $courseName = $rows['courseName'];

          

          echo"<option value='$courseName'>$courseName</option>";

        }

        ?>

<button type="submit" class="btn btn-primary">Primary</button>

</form>

</div>

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

    -->

  </body>

</html>

If you close your last select/option element… it will work.

That being said… why are you loading bootstrap twice?

Thank you, I think the bootstrap is because I copied the bootstrap starting template and offers two options I have not deleted one

Sponsor our Newsletter | Privacy Policy | Terms of Service