How to create responsive navbar in bootstrap - html

Below is my code where I intend to have a responsive navbar. It displays properly in big screens but for some reason is not collapsing in small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleanalytics.com/ajax/libs/jquery/1.11.3.jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
How can I make the toggle button collapse?
https://jsfiddle.net/Wosley_Alarico/8wncr2dm/

You Just used incorrect version for jQuery Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
try to include https://code.jquery.com/jquery-2.2.4.min.js

You're not calling jQuery correctly. Inspecting your Fiddle shows this:
Error: Bootstrap's JavaScript requires jQuery
It looks like the domain you're using is incorrect, and you're misplacing a slash for a dot. Try this instead:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Not a problem in your bootstrap code. Just the jquery cdn that you are using in script tag of your code is not working. Use a different cdn instead.
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
Edit your script tag as
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>

Related

data toggle and data target not working BootStrap 3

I am using BootStrap 3.4.1 and collapse is not working. I am using PHPStorm and it is not recognizing data-toggle and data-target. Although no typo on them.
I am learning bootstrap from PluralSight. Tried solution from different websites including w3schools and stackoverflow.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
<div class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
</body>
</html>
the button should be able to show and collapse class navbar-collapse. but is not responding.
before Clicking the button
After Clicking
This is the Navigation bar
Working code Demo
Just went through your question. I've found a few unconventional things in your code that put me into unease. Mentioning them below. First point will solve your issue while others are hopefully for your knowledge.
Bootstrap needs jquery to be loaded first to perform almost all of it's dynamic activities (in your case it's triggering a toogle event).
It is a good practice to load css files in header and javascripts down in the body (usually before closing tag of body) untill and unless specific purpose is required. It makes your page loading into client's browser faster.
I noticed you're linking two js files. "bootstrap.js" and "bootstrap.min.js". Both files have same javascript code but later one is just minified version. So just include one of them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target="#MINE">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
</body>
</html>

Why my boostrap 4.0 beta is not working properly?

I downloaded bootstrap 4.0 beta from getbootstrap.com, I included CSS & js from dist folder, but my styles are incomplete (navbar, hidden, visible are not working) do I need any extra stuff to include for my bootstrap folder,(do i need sass folder).
I included my css, js & jquery with correct path.
Can anyone help me with answer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
You mentioned that you downloaded Bootstrap 4.0 beta, so I'm assuming you're trying to use the file path to use it. You do not need to download SASS. If you don't really need all its features then you can just follow Bootstraps 'quick start guide', https://getbootstrap.com/docs/4.0/getting-started/introduction/.
<!DOCTYPE html>
<html lang="en">
<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Just to get you started, try that. Then maybe later you can pick specific components.

bootstrap navbar collapse won't work

I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sitename</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page sub</li>
<li>Page sub</li>
<li>Page sub</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>

Reason for span tags in Bootstrap nav bar header

I was learning bootstrap from w3schools. Please find the link.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h
In this link, in nav bar header I could notice the span tag as
<span class="icon-bar"></span>
it is used more than once in nav bar header. I removed those span tags from code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Still the code is responsive and no visible changes were there.. Is there any use of it?
Also could you please simply explain why class "sr-only" is used? Thanks in advance.
"icon-bar" is used for creating so called "burger" (like this ≡) on mobile devices - it creates button with short horizontral lines with dropdown instead of wide original menu
"sr-only" means "screen-reader only":
Screen readers will have trouble with your forms if you don't include
a label for every input. For these inline forms, you can hide the
labels using the .sr-only class.
The "sr-only" class is a tag that makes the content hidden except for "reader-devices" or "read-view" in some browsers.
Try to restore down your browser and minimize browser windows area as small as possible. nav-bar will change to responsive layout like in the up-right corner of this image.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
gives this view to responsive menu. And sr-only means screen reader only. Screen readers will have trouble with your forms if you don't include a label for every input.

My dropdown isn't coming down

HTML:-
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>AIT Project</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</nav>
</body>
I am making a simple bootstrap responsive navbar but the dropdown isn't dropping and showing the content .I am not able to figure out the issue. There are no errors in the console
Okay. You mean the 3-bar navbar-toggle on the right-hand side?
You have an extraneous space in your data-target attribute. It says data- target="#myNavbar" instead of data-target="#myNavbar".
Edit in response to comment:
So you don't see this drop-down? This is the one that I was initailly looking at when I said that it worked for me.
Try replaced your <head> with this code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<title>AIT Project</title>
</head>
Then it will be exactly the same as the code I'm using. I've replaced the links to local files with links to files from a CDN. That means you'll need to be connected to the internet. Does it work now?
Make sure you are linking properly to your js files.
Try to add this code in the end of your html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
if it works it means that you are not properly linking to the bootstrap.min.js file.