CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Omkar
Omkar

Reputation: 21

Javascript elements in Bootstrap not working

I am a beginer in bootstrap. I have tried elements like navbar, dropdowns, modal, carousel etc. and none of them are working properly. I'm guessing, it is because of the JS files which are linked to it. Please help I require these elements for a project.

Thank you.

<div class="navbar navbar-default">
    <div class="conatiner-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" id="navbarLogo">MyWebsite</a>
        </div>
        <div class="collapse navbar-collapse" id="#navbar-collapse1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Team</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Youtube</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>


<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script scr="js/bootstrap.min.js"></script>

Upvotes: 2

Views: 84

Answers (1)

vbranden
vbranden

Reputation: 5986

this works fine you have a few issues, most are typos as pointed out by @Rachel Gallen but you are also setting the id for navbar-collapse1 to its css selector value. you should set it to id="navbar-collapse1", adding the # is only used when doing a document query for the element. please review this documentation for more on selectors https://api.jquery.com/category/selectors/

<html>
<body>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" id="navbarLogo">MyWebsite</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Team</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Youtube</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>
</body>
</html>

Upvotes: 1

Related Questions