Bootstrap navigation button isn't working on mobile version-CodePudding

I tried to make an responsive bootstrap navigation bar but something isn't working. I even copy/paste the bootstrap navbar example and still the button doesn't show the menu when I click on it.

Can you help me solve it ?

        <div >
            <nav >
                <div >
                    <a  href="#">
                        <img src="log.png" >
                        Logo
                    </a>
                    <button  type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <i ></i>
                    </button>
                    <div  id="navbarSupportedContent">
                        <ul >
                            <li >
                                <a  href="#">Home</a>
                            </li>
                            <li >
                                <a  href="#">Text</a>
                            </li>
                            <li >
                                <a  href="#">Text</a>
                            </li>
                            <li >
                                <a  href="#">Text</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

CodePudding user response：

<div >
    <nav >
        <div >
            <a  href="#">
                <img src="log.png" >
                Logo
            </a>
            <button  type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarSupportedContent">
                <ul >
                    <li >
                        <a  href="#">Home</a>
                    </li>
                    <li >
                        <a  href="#">Text</a>
                    </li>
                    <li >
                        <a  href="#">Text</a>
                    </li>
                    <li >
                        <a  href="#">Text</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

this is working properly. This is Bootstrap-5. Please use data-bs-toggle and data-bs-target insted of data-toggle and data-target

CodePudding user response：

Please Check This Code

I hed Two changes in your code. This Is Bootstrap v4.0.0

 <div >
 <nav >
     <div >
         <a  href="#">
             <img src="log.png" >
             Logo
         </a>
         <button  type="button" data-toggle="collapse"
             data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
             aria-label="Toggle navigation">
             <span ></span>
         </button>
         <div  id="navbarSupportedContent">
             <ul >
                 <li >
                     <a  href="#">Home</a>
                 </li>
                 <li >
                     <a  href="#">Text</a>
                 </li>
                 <li >
                     <a  href="#">Text</a>
                 </li>
                 <li >
                     <a  href="#">Text</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>

enter image description here