Electron Bootstrap Modals not working


#1

I am trying to get some bootstrap modals. The whole code works when I run it in my browser. However, the modal box doesn’t even open in case of Electron:

    <nav class="navy-main">

    <div class="logo">T</div>

    <ul>
        <li>
            <a href="#" class="navy-item">S</a>
            <div class="navy-content">
                <div class="navy-sub">
                    <ul>
                       
                        <li>
                            <a data-toggle="modal" href="#FSet">F</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>

    </ul>
    <span class="close-my">&times;</span>
    <span class="close-my">&boxH;</span>
    <span class="close-my">&minus;</span>
</nav>

<!--Modals-->

<div class="modal" id="FSet">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Change : </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <div class="form-group modal-body">

                    <p>
                        <p class="lead" id="intext">Change: <select class="form-control" id="val2">
                                <option value="14">14</option>
                                <option value="16">16</option>
                            </select>
                        </p>

                        <hr class="my-4">
                        <p class="lead" id="intext2">Change Font Face: <select class="form-control" id="val1">
                                <option value="Arial">Arial</option>
                                <option value="Calibri">Calibri</option>
                                <option value="Consolas" selected>Consolas</option>
                                <option value="Courier">Courier</option>
                                <option value="Lucida Console">Lucida Console</option>
                                <option value="Segoe UI">Segoe UI</option>
                                <option value="Times New Roman">Times New Roman</option>
                            </select>
                        </p>
                </div>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="fsave">Save Changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>