Modal not working


I am new to Bootstrap Studio and I 've been trying to see if I can use the UI to replicate an HTML page that I already have. index.html from Bootstrap Studio is shown below. It is a play project that has an 'Add Post' button which when I click, a Modal form should appear.

The problem is that the modal is not coming up on click. I would appreciate any tip on what I am doing wrong.

Thanks Mark

<!DOCTYPE html>


<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blogen</title> <link rel="stylesheet" href=""> <link rel="stylesheet" href=""> <link rel="stylesheet" href=",400,700"> <link rel="stylesheet" href="assets/css/styles.min.css"> </head>


<div> <nav class="navbar navbar-dark navbar-expand-sm sticky-top bg-dark navigation-clean-button" style="padding:0px;"> <div class="container-fluid">[Blogen ][1] <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">Toggle navigation</button> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav flex-nowrap mr-auto"> <li class="nav-item" role="presentation">[Dashboard][1] <li class="nav-item" role="presentation">[Posts ][2] <li class="nav-item" role="presentation">[Categories][3] <li class="nav-item" role="presentation">[Users ][4] <ul class="nav navbar-nav flex-nowrap mr-auto"> <li class="dropdown"> [ <i class="fa fa-user"></i> Welcome Mark ][1] <div class="dropdown-menu" role="menu"> [ <i class="fa fa-user-circle mr-1"></i> Profile ][1] [ <i class="fa fa-gear mr-1"></i> Settings ][1] </div> <li class="nav-item" role="presentation"> [ <i class="fa fa-user-times mr-1"></i> Logout ][1] </div> </div> </nav> </div>

<header id="main-header" class="py-2 bg-primary text-white"> <h1><i class="fa fa-gear"></i> Dashboard</h1> </header>

<section> <div class="container-fluid bg-light pb-3"> <div class="row justify-content-center align-items-center mt-3"> <div class="col"> [ <i class="fa fa-plus"></i> Add Post ][1] </div> <div class="col"> [ <i class="fa fa-plus"></i> Add Post ][1] </div> <div class="col"> [ <i class="fa fa-plus"></i> Add User ][1] </div> </div> </div> </section>

<section> <div class="container"> <div class="row"> <div class="col col-md-9"> <div class="card"> <h4 class="bg-light">Latest Posts</h4> <table class="table table-striped table-responsive-md table-sm mr-auto"> <thead class="thead-inverse bg-dark text-white mr-auto"> <tr> <th># </th> <th>Title </th> <th>Category </th> <th>Date Posted</th> <th> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Post One</td> <td>Web Development</td> <td>July, 12, 2017</td> <td> [ <i class="fa fa-angle-double-right"></i> Details ][5] </td> </tr> <tr> <td>2 </td> <td>Post Two</td> <td>Web Development</td> <td>July, 12, 2017</td> <td> [ <i class="fa fa-angle-double-right"></i> Details ][1] </td> </tr> <tr> <td>3 </td> <td>Post Three</td> <td>Web Development</td> <td>July, 12, 2017</td> <td> [ <i class="fa fa-angle-double-right"></i> Details ][1] </td> </tr> <tr> <td>4 </td> <td>Post Four</td> <td>Web Development</td> <td>July, 12, 2017</td> <td> [ <i class="fa fa-angle-double-right"></i> Details ][1] </td> </tr> <tr> <td>5 </td> <td>Post Five</td> <td>Web Development</td> <td>July, 12, 2017</td> <td> [ <i class="fa fa-angle-double-right"></i> Details ][1] </td> </tr> </tbody> </table> </div> </div> <div class="col col-md-3"> <div class="card text-white bg-primary mb-3"> <div class="card-body text-center"> <h3 class="card-title">Posts <h1 class="display-4"> <i class="fa fa-pencil"></i>5 </h1></h3>[View ][2]</div> </div> <div class="card text-white bg-success mb-3"> <div class="card-body text-center"> <h3 class="card-title">Categories <h1 class="display-4"> <i class="fa fa-folder-open"></i>5 </h1></h3>[View ][3]</div> </div> <div class="card text-white bg-warning"> <div class="card-body text-center"> <h3 class="card-title">Users <h1 class="display-4"> <i class="fa fa-users"></i>5 </h1></h3>[View ][4]</div> </div> </div> </div> </div> </section>

<div class="modal fade" role="dialog" tabindex="-1" id="addPostModal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-primary text-white"> <h5 class="modal-title">Add Post</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="title">Title </label> <input class="form-control form-control-sm" type="text" name="title" placeholder="Enter a post title"> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-light" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save Changes</button> </div> </div> </div> </div>

<script src=""></script> <script src=""></script> <script src="assets/js/script.min.js"></script> </body>


go to "Components" - "Online" and type in "modal2

then install e.g. "Modal Advanced"

In a new document, you can then test the Modals

Because you don't have something like this in your code.

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addPostModal">Modal Button</button>