Bootstrap Navbar is not functional

Question

Bootstrap Navbar is not functional

Navigation

#1 by (1 votes)

1

I have already copied according to the Bootstrap documentation but my navbar is not working correctly when I lower the screen. The button appears normal, but when I click it, it should open a menu with the options of my "nav-content", but nothing happens when I click the button. I checked several times, did not I care?

<!DOCTYPEhtml><htmllang="pt-br">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css">

    <!-- CSS Personalizada -->
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <!-- Ícone da Página na aba -->
    <link rel="icon" href="imagens/bonfireicon.png">

    <title>Weeeelcome!</title>

</head>
<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-md navbar-light bg-faded">
        <a class="navbar-brand" href="#">Company</a>
        <!-- Hide Button -->
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content"
        aria-expanded="false" aria-label="Toogle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- NavBar Content -->
        <div class=" collapse navbar-collapse" id="nav-content">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Serviços</a>
                </li>
            </ul>
            <!--Search Box -->
            <form class="form-inline my-2 my my-lg-0">
                <input type="text" class="form-control mr-sm-2" placeholder="Digite sua pesquisa aqui..." aria-label="Search">
                <button type="submit" class="btn btn-outline-success">Pesquisar</button>
            </form>
        </div>
    </nav>


    <div class="container">

        <div class="starter-template">
            <h1 class="">What up!</h1>
            <p class="lead">Bonfire lit.</p>
        </div>

    </div>


    <!-- Bootstrap JS -->
    <script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

css bootstrap

asked by anonymous 28.09.2017 / 21:10

1 answer

Voting systems in an electronic ballot in Java Format string / float for currency in PHP

score 1 · Accepted Answer

First Jquery, then use the bootstrap.

If you look at the developer console, you'll notice the error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Then change:

<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

By:

<!--jQuery--><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>