Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Twitter Bootstrap

Bootstrap Navbar Will Not Toggle

Post a Comment
I am rather new to using Bootstrap, and would love for one of you pros out there to show me where I am making my mistake. What I am trying to accomplish: I am working on a respons

Solution 1:

You need to add the CDN's correctly else collapsing and toggling won't work

Order to be followed for adding Bootstrap 4 CDN is:

  1. jQuery
  2. Popper.js
  3. Bootstrap JS

and a sample template that is to be followed according to bootstrap 4 specifications is :

<!DOCTYPE html><html><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>Kulkarni Book-Stall</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"></head><body><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo02"><ulclass="navbar-nav mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav></body></html>

Solution 2:

You might be missing the javascript component of bootstrap. It is required for the menu foldout to work. Or, an exception might have halted Javascript. You can check that in your browsers debugging console.

Post a Comment for "Bootstrap Navbar Will Not Toggle"