Creating a loop of Bootstrap Modals

September 28, 2019| 2 comments

To create a loop of Bootstrap style modals on a page, you can use a foreach or while loop in PHP.

First, let’s do the code for one modal.

Single Modal Code

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button>
<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body"> Modal body.. </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

A foreach loop of modals

So an array is created with a known amount of modals, a counter variable $i is created and incremented after each loop iteration, that counter variable is used in the button and modal ID to link the correct modals together.

See how to create a WordPress custom loop of modals.