launch bootstrap v5 modal from anchor tag inside a navbar

Question

I want to launch a bootstrap v5 modal from an anchor tag inside a navbar. However, it doesn't work. I have seen relative posts and I can't find the reason for this. Any suggestion would be helpful.

This is My code:

       
<a class="nav-link px-3 contactperson" data-toggle="modal" href= "#contactModal"> Contact us</a> <!--here the modal is called-->
                         
<!--modal-->
<div id="contactModal" class="modal fade" role="dialog" tabindex="-1">
        <!-- aria-labelledby="#contactperson" -->
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Contact Us</h5>
                    <button type="button " class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                     <!--content-->
                    </div>

            </div>

        </div>
    </div>'''

Thank you in advance

Answer 1

The attribute data-toggle has become data-bs-toggle in Bootstrap 5.

So, replace:

<a class="nav-link px-3 contactperson" data-toggle="modal" href= "#contactModal"> Contact us</a>

With:

<a class="nav-link px-3 contactperson" data-bs-toggle="modal" href= "#contactModal"> Contact us</a>