Skip to main content

Bootstrap Navbar Toggle Not Working?

One of my friends requested me to post this article. Though the problem was easy to solve for me, it was difficult for him as he has just plunged into the Bootstrap world. It is exciting to get things work in the first attempt, but that is not the case when things are not configured correctly and this is what happened with my friend.

So, my friend wanted to create a sample Bootstrap application and to see how responsive website looks. He created an Angular (not Angular JS) project using Angular CLI. The setup was ready and he could see the application running fine on Chrome. Then he visited the Bootstrap CDN to reference the bootstrap.min.css and bootstrap.min.js minified files and his index.html file looked something like this:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Azilen</title>
  <base href="/">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Now, to save time, he opened Bootswatch and copy pasted the code of NavBar in index.html's body section. Then, he ran the command ng serve --open from the command prompt and the application fired up in browser with the header as shown below:




And now he clicked on Dropdown menu with the expectation that it would show up, but unfortunately it didn't pull out. What was he missing in index.html file? It was JQuery file. Import the file or it can be referenced through JQuery CDN . As shown below, just copy the url and paste it in index.html.



And now we can see that the Dropdown menu is working.



Great! But now when he tested his original purpose of using Bootstrap, that is the responsiveness of the page by shrinking the window and clicking the bar icon, there was no effect. It was shocking. So, what is missing now when we have all javascripts and CSS references in place? Culprit is the data-toggle="collapse" property in the button.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" aria-expanded="false" data-target="#bs-example-navbar-collapse-1">

Once the toggle property was added, the bar button started functioning. Hurray!!!

Hope you liked this article. Please drop the comments if you are facing the same situation.

Comments

Post a Comment

Popular posts from this blog

Characteristics of a Good Programming Language

Till now there are many high level languages which are very popular, and there are others, which could not become so popular in-spite of being very powerful. There might be many reasons for the success of a language, but one obvious reason is the characteristics of the language. Several characteristics believed to be important with respect to making a programming language good are briefly discussed below. Simplicity A good programming language must be simple and easy to learn and use. For example, BASIC is liked by many programmers only because of its simplicity. Thus, a good programming language should provide a programmer with a clear, simple and unified set of concepts which can be easily grasped. It is also easy to develop and implement a compiler or an interpreter for a programming language that is simple. However, the power needed for the language should not be sacrificed for simplicity. The overall simplicity of a programming language strongly affects the readability of the pr...
1 comment
Read more

Angular 4 and Firebase Authentication: Setup

If you have come to this article, it means you are keen to learn new technology and that too Firebase. I love Firebase because it provides all basic but important features of any web application. Take for example, authentication, which is cumbersome and risky if not implemented with utmost care. And when we have the integration of Angular and Firebase, it becomes a lot easier for a developer to build such crucial modules in less time with minimal efforts. In this article we will create a simple Angular application using Firebase. I am going ahead with the understanding that you know the benefits of Firebase and have little knowledge about it. There are plenty of posts out on the web if you are behind. Step 1: Install Angular CLI (if not installed). npm install -g angular-cli Step 2: Create new Angular 4 project. By default now angular CLI will create Angular 4 project so you need not fret. ng new firebase-authentication Step 3: Check whether the ne...
Post a Comment
Read more

Switch-case, simple calculator . . .

11.      Write a program to perform some mathematic functions with the help of “switch-case” statement. #include<stdio.h> #include<conio.h> void main() { int a,b,ans; char c; clrscr(); printf("\ Enter a and b:"); scanf("%d%d",&a,&b); printf("\n Enter operator:"); fflush(stdin); scanf("%c",&c); switch(c) { case'+':ans=a+b;       break; case'-':ans=a-b;       break; case'*':ans=a*b;       break; case'/':ans=a/b;       break; } printf("\n ans %d",ans); getch(); } 12.      Print the Fibonacci series #include<stdio.h> #include<conio.h> void main() { int a=1,b=1,s=3,c,ch; clrscr(); printf("how many steps="); scanf("%d",&ch); printf("%5d%5d",a,b); for(s=3;s<=ch;s++) {       c=a+b;       printf("%5d",c);       a=b;    ...
3 comments
Read more