CODEWITHSUNDEEP
htmlbootstrap-4
Rushil
Rushil

Reputation: 21

Bootstrap Collapse is not Collapsing

I'm trying to create collapse using bootstrap and I also connected "data-target" and "id" which is navbarResponsive. I'm not sure what's wrong here.

This is my code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                    <span class="navbar-toggler-icon"></span>
                </button>
            
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#service">Experience</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                        
                    </ul>
                </div>
        </nav>

Upvotes: 2

Views: 1281

Answers (2)

deepakchethan
deepakchethan

Reputation: 5600

Make sure you import JQuery before bootstrap. The same example is working with the following linking:

<!-- first jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- then bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<!-- css --> 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav mx-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#home">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#about">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#service">Experience</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#contact">Contact</a>
                            </li>
                            
                        </ul>
                    </div>
            </nav>

Upvotes: 2

Ijaz Ali
Ijaz Ali

Reputation: 70

Please make sure your Jquery & bootstrap.js file is correctly linked with the project.

Upvotes: 2

Related Questions