html - Bootstrap modal not displaying on button click

Question

I'm trying to use Bootstrap to show a modal "confirm" dialog for some unpublish/delete buttons, but when I click on the buttons that, as far as I can tell, have all the correct attributes, nothing happens.

I've done some searching, and there are no conflicts with any CSS anywhere else (image of search results for "fade" and "modal" in vscode below code. The only references to those classes are from bootstrap, and where I have it placed in the EJS file.

Any help would be appreciated. I'm sure it's something simple I'm missing or have done wrong.

<div class="row" id="owner-controls">
    <div class="col">
        <button type="button" class="btn btn-warning my-1" data-bs-toggle="modal" data-bs-target="#confirm-unpublish-modal">Unpublish book</button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-danger my-1" data-bs-toggle="modal" data-bs-target="#confirm-delete-modal">Delete book</button>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="confirm-unpublish-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-unpublish-label" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="confirm-unpublish-label">Unpublish Book?</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to unpublish this book? It will no longer be available for users to write reviews, but existing reviews will remain in place. This action *can* be undone by an "Owner" user.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <form action="/books/<%= currentBook.id %>/unpublish?method=PUT" class="unpublish-book" id="unpublish-book" method="post">
                <button class="btn btn-warning my-1">Unpublish book</button>
            </form>
        </div>
    </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="confirm-delete-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-delete-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="confirm-delete-label">Delete Book?</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete this book? All user-created reviews associated with this book will be permanently removed, and no new reviews for this book can be created. This action *CANNOT* be undone.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <form action="/books/<%= currentBook.id %>/unpublish?method=DELETE" class="delete-book" id="delete-book"  method="post">
                <button class="btn btn-danger my-1">Delete book</button>
            </form>
        </div>
        </div>
    </div>
</div>

question from:https://stackoverflow.com/questions/66049879/bootstrap-modal-not-displaying-on-button-click

Answer 1

The attribute you use contains the suffix -bs-. This type of attribute is not used in Version 4.x.x.

The following usage is wrong. Because this came with v5.

data-bs-toggle="modal"

Proper use Docs

data-toggle="modal"

You should remove all -bs- in the code. And try again. Feel free to report the positive negative result.